Question

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

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

在许多情况下这很好用，但触发词也可能出现在P标签内。编辑们编写他们的文本，这些文本由CMS存储为HTML。我无法控制P标签的使用。将div放入P-tag内时，P-tag会在插入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>

然后在进行工具提示转换后，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包装在object-tag中：

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

这确实有效！即使在P-tag中！适用于Firefox和Chrome但不适用于IE。 IE改变DOM并将tipword HTML放入object-tag的altHtml属性中：

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

超过90％的我（公司）用户使用IE浏览器，因此我不能忽视该浏览器（尽我所能）。

有没有人建议接下来要尝试什么？你们是我的最后一招。我担心我必须忘记我漂亮的工具提示div并转而使用标准的浏览器工具提示（title-attribute）。

谢谢！

巴特

Answer 1

以下答案经过编辑，以便从最初模糊的答案中同意具体方法。

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

因此，您基本上被迫将工具提示的内容放在其他地方。我认为最简单和最优雅的方法是收集属于字符串中工具提示的 div ，并将它们附加到网页的底部，如隐藏的那样。（我从来没有使用Alterian，但我想它应该支持插件这样的东西？）然后移动＆amp;点击/悬停时显示这些div。我试图在这里显示这样的网页：http://jsfiddle.net/NaDeh/1/这是几十行。

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

P标签内基于div的工具提示

1 个答案: