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!

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!

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow asked Jun 24, 2013 at 0:23 AndreyAndrey 85966 gold badges1717 silver badges2828 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

What's happening is that you're instantiating the plug-in on the element when you mouseover it the first time, and then the plug-in works as expected on subsequent mouseovers on that element.

Using the configuration suggested in the 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>

.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 (JSFiddle)

I had the same issue with a tooltip on a button. It turned out that the tooltip didn't show because the button was disabled the first time. There was code FOLLOWING the attempted to show the tooltip that checked some other values and enabled the button. After the first "run" the button was enabled so on the second and subsequent events the tooltip did/does show. I simply moved the "enable" code before the code that attempts to show the tooltip and my problem was solved.

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

Similar issues and solution can be found here: Jquery onmouseover triggers on second event