Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DIV tooltip appears, SPAN tooltip not so much

See original GitHub issue

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:

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,


Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7

github_iconTop GitHub Comments

louisamelinecommented, Jan 21, 2018

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!

louisamelinecommented, Jan 21, 2018

I’m glad I could help 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

DIV tooltip appears, SPAN tooltip not so much #723 - GitHub
Hi Graeme, Tooltipster works fine on spans too and I see that the tooltips were actually initialized on your spans. It's most likely...
Read more >
Add a tooltip to a div - Stack Overflow
Currently there is a glitch in the demo: When putting the mouse at the area below the third div in the demo, the...
Read more >
The tooltip is not showing completely - HTML & CSS - SitePoint
In my website, the tooltip is not showing completely when the text is more, it is hiding under the header part… what should...
Read more >
Make tooltip appear above everything else? - HTML-CSS
I'm trying to include a tooltip that appears when the user hovers over specific text inside the content panel. An example of the...
Read more >
CSS Tooltip - W3Schools
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found