P 标签内基于 div 的工具提示
我正在尝试使用 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 之前会自动关闭，这当然会破坏文本的布局，并且因为 trigword 和 tooltip-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>
... 并且布局和工具提示被破坏了。
向我建议的解决方案是将工具提示跨度和 div 包装起来。对象标签：
...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<object><span class='tipword'>$1</span><div class='tooltip'>$2</div></object>");
这确实有效！即使在 P 标签中也适用，但不适用于 IE。 IE 会更改 DOM 并将tipword HTML 放入对象标签的 altHtml 属性中：
<object altHtml="<span ..... /div>"/>
我的（公司内）用户中超过 90% 使用 IE，因此我无法忽略该浏览器（尽管我愿意）。
有人对下一步尝试什么有建议吗？你们是我最后的依靠。我担心我将不得不忘记我漂亮的工具提示 div 并诉诸标准浏览器工具提示（标题属性）。
谢谢！
巴特
I'm trying to implement tooltip functionality using jQueryTools, on content coming from a CMS (Alterian). The idea is that editors mark words in their texts with a hash and brackets wherever they want a tooltip, i.e. "#triggerword (tooltip content). At request time, the HTML is altered using a regular expression, and tooltip divs are inserted after each triggerword, like so:
...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<span class='tipword'>$1</span><div class='tooltip'>$2</div>");
This works fine in many cases, but triggerwords are likely to appear inside P-tags as well. Editors write their texts and these are stored as HTML by the CMS. I can't control the use of P-tags. When you put a div inside a P-tag, the P-tag is automatically closed before the div is inserted. This ofcourse breaks the layout of the text and because the triggerword and tooltip-div are no longer adjacent, the tooltip doesn't work.
When the HTML from the CMS is something like:
<P>
some text with a #triggerword (it's a word that triggers a tooltip to appear)
and the text goes on....
</P>
then after doing the tooltip transformation the DOM reads:
<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>
... and the layout and tooltip are broken.
A solution that was suggested to me is to wrap the tooltip span and div in an object-tag:
...replace(/#(\w[\s\S]*?)\(([\s\S]*?)\)/g, "<object><span class='tipword'>$1</span><div class='tooltip'>$2</div></object>");
This indeed works! Even in P-tags! For Firefox and Chrome but NOT for IE. IE alters the DOM and puts the tipword HTML into an altHtml-property of the object-tag:
<object altHtml="<span ..... /div>"/>
Over 90% of my (incompany) users use IE so I can't ignore that browser (as much as I'd like to).
Does anyone have suggestions on what to try next? You guys are my last resort. I fear that I'll have to forget my nice tooltip divs and resort to standard browser tooltips (title-attribute) instead.
Thanks!
Bart
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
下面的答案经过编辑，以符合特定的方法，来自最初的模糊答案。
主要问题是p绝对不能包含块级元素（例如，另一个p、div）。在此类页面的 Chrome 中，浏览器会重新修改 html，并且很难使用标准 .html 验证工具来解决这一问题。所以要注意这一点。
因此，您基本上被迫将工具提示的内容放在其他地方。我认为最简单和最优雅的方法是收集属于字符串中工具提示的 div 并将它们附加到网页底部，作为隐藏。 （我从未使用过 Alterian，但我想它应该支持插件这样的东西？）然后 move &单击/悬停时显示这些 div。我试图在这里展示这样的网页： http://jsfiddle.net/NaDeh/1/< /a> 有几十行长。
原则上你也可以将 div 的内容放在其他地方，比如 JavaScript 字符串，但你需要小心转义；或者在另一个页面中使用ajax加载，但这种额外的加载似乎没有必要。
The answer below is edited to agree with a specific approach, from an original vague answer.
The main issue is that p's absolutely cannot contain block-level elements (e.g., another p, div). In chrome for such pages, the browser re-mangles the html, and it is difficult to figure this out with standard .html validation tools. So be watchful for this.
So, you are basically forced to put the contents of your tooltip somewhere else. I think the simplest and most elegant approach, is to collect the div's belonging to the tooltips in a string and append them to the bottom of the webpage, as hidden. (I have never used Alterian but I guess it should support such a thing for plugins?) Then move & show these divs upon clicking/hovering. I tried to show what such a webpage would look like here: http://jsfiddle.net/NaDeh/1/ which is a few dozen lines long.
You could also in principle put the contents of the divs somewhere else, like a javascript string but you'd need to do careful escaping; or in another page to be loaded with ajax, but such extra loads seem unnecessary.