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

我试图使用jQueryTools实现工具提示功能，内容来自CMS（Alterian）。这个想法是，编辑器在他们的文本中使用散列和括号标记单词，无论他们想要工具提示，例如“#triggerword（工具提示内容）”。在请求时，HTML使用正则表达式进行更改，工具提示div插入每个triggerword，像这样：。P标签内的基于div的工具提示

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

这工作在许多情况下罚款，但triggerwords都有可能出现P标签内以及编辑写自己的文本和这些CMS存储为HTML我不能控制P标签的使用当你在一个P标签内放置一个div时，P标签在插入div之前自动关闭，这当然会破坏文本的布局，并且因为triggerword和tooltip-div是no更长的相邻，工具提示不起作用。

当从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对象中的标签：

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

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

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

超过90我的（incompany）％的用户使用IE浏览器，所以我不能忽略浏览器（高达我想）。

有没有人有什么建议下一步尝试？你们是我的最后一招。我担心我不得不忘记我的漂亮的工具提示div，并使用标准浏览器工具提示（title-attribute）代替。

谢谢！

巴特

来源

2011-05-25 Foobart

下面的答案是编辑与特定的方法来达成一致，从原来模糊的答案。

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

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

你原则上也可以把div的内容放在别的地方，就像一个javascript字符串，但是你需要小心地逃脱;或在另一个页面加载ajax，但这样的额外负载似乎没有必要。

来源

2011-07-01 15:55:24 daveagp

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

回答

相关问题