Javascript tooltip appears only on second hang

Question

I use jQuery and Twitter Bootstrap, and I want the tooltip to be displayed when the link falls. However, the tooltip doesn’t appear the first time I link to the link, but if I move the mouse and turn it on again, it will work every time for that link.

I have several of them on the page:

<a href="#" onmouseover="$(this).tooltip();" class="postAuthor" data-original-title="@username">Full Name</a> 

I created jsFiddle to demonstrate: jsFiddle . Any help would be appreciated - thanks in advance!

Answer 1

What happens is that you create an instance of the plug-in when you bring it to the fore, and then the plug-in works as expected with subsequent overlays on this element.

Using the configuration suggested in docs works (see fiddle ):

JavaScript:

 // tooltip demo $('div').tooltip({ selector: "a[data-toggle=tooltip]" }) 

HTML:

 <div style="text-align: center; width: 100%; margin-top: 50px;"> <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a> <p/><p/> <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a><p/> <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a><p/> <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a><p/> <a href="#" data-toggle="tooltip" class="postAuthor" data-original-title="@username">Full Name</a> </div> 

Answer 2

.tooltip() functions trigger a tooltip effect on a link, rather than showing a tooltip

Explanation:

When $(this).tooltip() run on first hover, it first instantiates the plugin. Then, finally, in the second hover you will get a tooltip.

Decision:

Add this to your code:

 $(function() { $("a").tooltip(); }); 

Solution (JSFiddle)

Answer 3

I think it would be cleaner if you let jQuery handle the mouseover event and put all your codes inside $ (document) .ready

Similar problems and solutions can be found here: jQuery onmouseover fires a second event