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();
});

Solution

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!