CODEWITHSUNDEEP
jquerytwitter-bootstraptooltip
Zaki Aziz
Zaki Aziz

Reputation: 3852

Bootstrap tooltip showing on second mouse enter

So I have a generic selecter like this in my javascript.js file:

$(document).on('hover', '*[rel=tooltip]', function(e){
    $(this).tooltip();
});

And throughout my HTML files I have tags that may have rel='tooltip' ie:

<i class="icon-ban-circle" rel="tooltip" title="Ban" data-placement="bottom"></i>
<a rel="tooltip" title="hover for tooltip">Text</a>

This solution works, but with a caveat. You have to hover over the element a second time for the tooltip to show. I like the fact that I can just add a rel="tooltip" and title="some text" to my HTML and have the tooltips show up right away and want to keep that convenience.

I've created a JSFiddle demoing this problem: http://jsfiddle.net/xKKMM/

Upvotes: 2

Views: 2495

Answers (1)

PSL
PSL

Reputation: 123739

Try:

$(document).on({
    'mouseenter': function (e) {
        $(this).tooltip('show');
    },
        'mouseeleave': function (e) {
        $(this).tooltip('hide');
    }
}, '*[rel=tooltip]');

Fiddle

What happens in your case is only during the first hover it sets up the tooltip by calling tooltip constructor. And then onwards when you hover it is already set up so it shows when hovered. You can combine the setup with this. But this will invoke the constructor on every hover. So you can avoid it by just doing it at once like this.

$('*[rel=tooltip]').tooltip();

Upvotes: 3

Related Questions