June 24, 2013
Javascript tooltip only appears on second hover
Ghostmancer’s Question:
I am using jQuery and Twitter Bootstrap, and want to have a tooltip appear when hovering over a link. However, the tooltip doesn’t appear the first time I hover over a link, but if I move the mouse away and back on, it works every time for that link.
I have several of these on the page:
<a href="#" onmouseover="$(this).tooltip();" class="postAuthor" data-original-title="@username">Full Name</a>
I’ve created a jsFiddle to demonstrate: jsFiddle. Any help would be appreciated – thanks in advance!
.tooltip() functions initiates the tooltip effect on the link, not show the tooltip
Explanation:
When the $(this).tooltip() is triggered on the first hover, it instantiate the plugin first. Then finally on the second hover you get the tooltip.
Solution:
Add this on your code:
$(function() {
$("a").tooltip();
});
