DIV tooltip appears, SPAN tooltip not so much

Hi Louis,

I’m trying to retrofit your tooltips into an existing site, and while I’ve got the styles and jQuery running, I’ve run into an odd issue, which has left me scratching my head!

I’ve had a good look around both Github and Stackoverflow, and haven’t found an answer to my problem, so hoping you can help me!

The following mark-up does work:

<p>This <div class="tooltip" title="test">tooltip</div> does work!</p>

The following mark-up does not work:

<p>This <span class="tooltip" title="test">tooltip</span> does not work.</p>

The trouble with the div approach is that it breaks the “tooltipstered” keyword out of the <p>...</p> tags, and displays it on it’s own line, and then anything after it that was previously held within the <p>...</p> tags is left to float, inheriting the styles from tooltipstered, eg:

<p>This </p>
<div class="tooltip tooltipsered">tooltip</div>
does work!

By using span instead, everything appears fine on screen, but the tooltip is not triggering, and the console log is not showing any errors. I’m assuming it’s to do with the “display” settings of the span within the <p>...</p> tags — but having played around with the “display” and “position” CSS values on my .tooltip styles, nothing appears to work.

I’ve set up a test page that shows both the working DIV version (for: “Content Management System”) and non-working SPAN version (for: “jQuery”) at the following link: https://cviscotland.org/glossary_test.php

Anything you — or anyone else reading this plea for help! — can do to point me in the right direction would be much appreciated!

Many thanks in advance,

Graeme

[louisameline]

You’re welcome! When you edit the DOM with .html(), you’re actually removing parts of the DOM and creating new ones. A tag in the DOM can have data associated to it, that you can’t see just by looking at the source in the DOM inspector. By deleting the original span and recreating a new one, even if they “look” the same, you lost the data that Tooltipster created. Good luck!

[louisameline]

I’m glad I could help 😃