Question

Here is my current tooltip:

<div class="tooltip" style="position: absolute; top: 1298px; left: 382.5px; display: none; ">this is where the tooltip text goes. You are quite the cool!</div>

Ignore the fact that it has inline CSS for a sec (sorry)…

Ok so I need to insert 3 spans into it – 1.5 before and 1.5 after the HTML so it looks like this in the end:

<div class="tooltip" style="position: absolute; top: 1298px; left: 382.5px; display: none; "><span class="tooltop"></span><span class="toolmid">this is where the tooltip text goes. You are quite the cool!</span><span class="toolbot"></span></div>

but of course don’t know the best way to do this…

Essentially it would look like this:

(existing div) (beginning span /) (middle span) [existing innerHTML] (/ middle span) (ending span /) (/existing div)

No idea.

Answer 1

You can wrapAll existing content, then prepend the top and append the bottom

var tooltip = $('.tooltip');                            //cache tooltip

tooltip.contents().wrapAll('<span class="toolmid" />'); //wrap existing contents
tooltip.prepend('<span class="tooltop">');              //prepend the top
tooltip.append('<span class="toolbot">');               //append the bottom