Html P标记中基于div的工具提示

我正在尝试使用jQueryTools在来自CMS（Alterian）的内容上实现工具提示功能。其想法是，编辑在文本中使用散列和括号标记他们想要工具提示的任何地方的单词，即“#triggerword（工具提示内容）。在请求时，HTML使用正则表达式进行更改，并在每个triggerword之后插入工具提示div，如下所示：

...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<span class='tipword'>$1</span><div class='tooltip'>$2</div>");

…替换（/#）（\w[\s\s]*？）\（（[\s\s]*？）\）/g，“$1$2”）；

这在很多情况下都很有效，但triggerwords也可能出现在p-tag中。编辑编写文本，这些文本由CMS存储为HTML。我无法控制p-tag的使用。当你在p-tag中放置一个div时，p-tag会在插入div之前自动关闭。这当然会破坏文本的布局，因为triggerword和工具提示div不再相邻，工具提示不起作用

当来自CMS的HTML类似于：

<P>
    some text with a #triggerword (it's a word that triggers a tooltip to appear)
    and the text goes on....
</P>

一些带有#triggerword的文本（触发工具提示显示的单词）
文本还在继续。。。。

然后，在完成工具提示转换后，DOM将显示：

<P>
    some text with a <SPAN class='tipword'>triggerword</SPAN>
</P>
<DIV class='tooltip'>it's a word that triggers a tooltip to appear</DIV>"); 
and the text goes on....
<P></P>

一些带有触发词的文本

这是一个触发工具提示出现的单词）；
文本还在继续。。。。
 

。。。布局和工具提示都被破坏了

向我建议的解决方案是将工具提示span和div包装在对象标记中：

...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<object><span class='tipword'>$1</span><div class='tooltip'>$2</div></object>");

<object altHtml="<span ..... /div>"/>

…替换（/#）（\w[\s\s]*？）\（（[\s\s]*？）\）/g，“$1$2”）；

这确实有效！即使在P标签！适用于Firefox和Chrome，但不适用于IE。IE更改DOM并将tipword HTML放入对象标记的altHtml属性中：

...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<object><span class='tipword'>$1</span><div class='tooltip'>$2</div></object>");

<object altHtml="<span ..... /div>"/>

我的（不兼容的）用户中有90%以上使用IE，所以我不能忽视那个浏览器（尽管我很想）

有人对下一步的尝试有什么建议吗？你们是我最后的选择。我担心我将不得不忘记我漂亮的工具提示div，转而求助于标准浏览器工具提示（title属性）

谢谢

---

Bart

下面的答案经过编辑，以符合一种特定的方法，源于原始的模糊答案

主要问题是p绝对不能包含块级元素（例如，另一个p，div）。在chrome浏览器中，浏览器会重新处理html，而使用标准的.html验证工具很难解决这一问题。所以要注意这一点

因此，您基本上被迫将工具提示的内容放在其他地方。我认为最简单、最优雅的方法是收集属于工具提示的div，并将其添加到网页底部（隐藏）。（我从未使用过Alterian，但我想它应该支持插件的这种功能？）然后单击/悬停移动并显示这些div。我试图在这里展示这样一个网页的样子：它只有几十行长

---

原则上，您也可以将div的内容放在其他地方，比如javascript字符串，但需要小心地转义；或者在另一个要加载ajax的页面中，但这样的额外加载似乎是不必要的。

下面的答案经过编辑，以符合一种特定的方法，来自一个原始的模糊答案

主要问题是p绝对不能包含块级元素（例如，另一个p，div）。在chrome浏览器中，浏览器会重新处理html，而使用标准的.html验证工具很难解决这一问题。所以要注意这一点

因此，您基本上被迫将工具提示的内容放在其他地方。我认为最简单、最优雅的方法是收集属于工具提示的div，并将其添加到网页底部（隐藏）。（我从未使用过Alterian，但我想它应该支持插件的这种功能？）然后单击/悬停移动并显示这些div。我试图在这里展示这样一个网页的样子：它只有几十行长

原则上，您也可以将div的内容放在其他地方，比如javascript字符串，但需要小心地转义；或者在另一个要加载ajax的页面中，但这样的额外加载似乎是不必要的