How to make bootstrap's tooltip disappear after 2 seconds on hover

Quoter picture Quoter · Jan 21, 2014 · Viewed 22.9k times · Source

I'm using the Tooltip() from Twitter-Bootstrap. When hovered over an element, a tooltip shows up. But it stays there unless you move your mouse away from it.

How can I make it dissapear after a few seconds it popped up, in stead of waiting until mouse moves away from the element?

Answer

Gabriel S. picture Gabriel S. · Jan 21, 2014

Bootstrap provides methods for manipulating tooltips such as $('#element').tooltip('hide')

If you add the data-trigger='manual' attribute to your elements, you can control how the tooltip is shown or hidden.

$('.bstooltip').mouseenter(function(){
    var that = $(this)
    that.tooltip('show');
    setTimeout(function(){
        that.tooltip('hide');
    }, 2000);
});

$('.bstooltip').mouseleave(function(){
    $(this).tooltip('hide');
});

Fiddle