How can I have tooltips with HTML in them when CKEditor mangles <span>'s

Question

I have been playing with the included CSS / HTML to implement tooltips that I can use HTML inside to enrichen them. The problem is that the website where this is intended for has a CMS front-end that uses CKEditor (4) and CKEditor doesn't like span elements - it seems to duplicate them and move the duplicated one outside the div . This seems to be a known issue/feature.

I don't have FTP access either so bypassing CKEditor isn't an option, and anyway I actually find the WYSIWYG quite useful, especially for tables.

My question is this: Is it feasible to use javascript that executes when the page finishes loading that grabs the HTML from somewhere (I guess a string constant declared in piece of javascript) and wraps it in <span>..</span> and injects it into the page at the right spot? I'm prepared to give it a go, but I thought I should check first if it's a hare-brained idea/it can't work/there are much simpler ways.

 .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 400px; background-color: lightyellow; color: maroon; text-align: left; font-family: Tahoma; border-radius: 6px; padding: 5px 5px; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } 

 <div class="tooltip">Hover over me (tooltip HTML is inside a &lt;span&gt; - CKEditor breaks this HTML) <span class="tooltiptext"> <h3>Tooltip using &lt;span&gt; and allowing HTML</h3><hr> <br> <table align="center" border="1" cellpadding="3" cellspacing="1" style="width:80%;"> <tr> <td style="color:red;">Label 1:</td><td>data</td> </tr> <tr> <td style="color:blue;">Label 2:</td><td>data</td> </tr> <tr> <td style="color:green;">Label 3:</td><td><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/5bzH6DGdLHw.png" style="height: 24px; width: 24px; display: block; margin-left: auto;margin-right: auto;"/></td> </tr> </table> </span> </div> <br> <br> <div class="tooltip">Hover over me (tooltip HTML is inside a &lt;div&gt; - CKEditor doesn't break this HTML) <div class="tooltiptext""> <h3>Tooltip using &lt;div&gt; and allowing HTML</h3><hr> <br> <table align="center" border="1" cellpadding="3" cellspacing="1" style="width:80%;"> <tr> <td style="color:red;">Label 1:</td><td>data</td> </tr> <tr> <td style="color:blue;">Label 2:</td><td>data</td> </tr> <tr> <td style="color:green;">Label 3:</td><td><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/5bzH6DGdLHw.png" style="height: 24px; width: 24px; display: block; margin-left: auto;margin-right: auto;"/></td> </tr> </table> </div> </div> <br> <br> 

Answer 1

In answer to your question, yes you can use javascript to dynamically insert elements after the page has loaded, however, if you simply want to use a span but a bug is preventing that particular tag then why not just use a different inline level element ( <i> or <label> ). After all thats all a span is.

edit

I've just had a look at your html markup and realised you are wrapping a load of block level elements like h3 and table inside your inline level span which is invalid html. I don't think this is actually a bug. Try it without the h3 and table inside and see if it still moves your span. Also why are you using a span here? If you want a container for the h3 and table to be inline then change the span to a div and set the div to display: inline-block