div-based tooltips within P-tags

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&开发者_运维知识库lt;/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

---

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.