1

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

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

这在许多情况下都可以正常工作，但触发词也可能出现在 P-tags 中。编辑编写他们的文本，这些文本由 CMS 存储为 HTML。我无法控制 P-tags 的使用。当您将 div 放入 P-tag 中时，P-tag 在插入 div 之前会自动关闭。这当然会破坏文本的布局，并且因为触发词和 tooltip-div 不再相邻，所以 tooltip 不起作用。

当来自 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>

...并且布局和工具提示已损坏。

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

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

这确实有效！即使在 P-tags 中！适用于 Firefox 和 Chrome，但不适用于 IE。IE 更改 DOM 并将提示词 HTML 放入 object-tag 的 altHtml-property：

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

我的（公司）用户中有超过 90% 使用 IE，所以我不能忽略那个浏览器（我想尽可能多地）。

有人对下一步要尝试什么有建议吗？你们是我最后的手段。我担心我将不得不忘记我漂亮的工具提示 div 并改用标准浏览器工具提示（标题属性）。

谢谢！

巴特

4

1 回答 1

1

下面的答案经过编辑以同意特定方法，来自原始模糊答案。

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

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

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

于 2011-07-01T15:55:24.827 回答