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的工具提示

回答

相關問題