twitter-bootstrap-3twitter-bootstrap-tooltip

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


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?


Solution

  • 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