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

Question

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?

Coff

Answer 1

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

Tacklind

I used your suggestion with the shown.bs.tooltip event. But it's not dissapearing. Complete function: function toolTipIsVisible() { setTimeout( function () { $(this).tooltip('hide') }, 2000); } – Coff

You're welcome, although I wonder why you would need to do such a thing. Often, I get mad at old software that still have this behavior because it doesn't give you enough time to read the content before disappearing. – Tacklind

Because the tooltip blocks the view to other 'things'. Besides, how much time would you need to read a line with a word or 5/6? It's set on 5 seconds. – Coff

Instead add the data-trigger='manual' attribute to each of elements, we can add option in initialisation script:'$(document).ready(function() { $('[data-toggle="tooltip"]').tooltip({ trigger:'hover manual', //...})})' – Reface

Works when used together with var tooltip = $('a[data-toggle="tooltip"]').tooltip(); and replacing $('.bstooltip') with tooltip. – Breakup

Answer 2

If multiple mouseEnter and mouseleave event happen within delay time 'hide' is called multiple times and may be the tooltip closes earlier than expected. Older calls must be discarded.

$('.bstooltip').on('shown.bs.tooltip', function () {
    var that = $(this);

    var element = that[0];
    if(element.myShowTooltipEventNum == null){
        element.myShowTooltipEventNum = 0;
    }else{
        element.myShowTooltipEventNum++;
    }
    var eventNum = element.myShowTooltipEventNum;

    setTimeout(function(){
        if(element.myShowTooltipEventNum == eventNum){
            that.tooltip('hide');
        }
        // else skip timeout event
    }, 2000);
});

Fiddle

Epigrammatize

Answer 3

setTimeout would only work once for the first tooltip, we need to use setInterval instead.

This works for me perfectly fine with Bootstrap 4 Tooltips

$(document).ready( function () {
    $('[data-toggle="tooltip"]').tooltip();   
    setInterval(function () {
         $('[data-toggle="tooltip"]').tooltip('hide'); 
    }, 2000);
});

The tooltip would appear and disappear after 2 seconds.

Racer

Answer 4

Here is simple Answer

$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});

only give hide parameter in delay option.

it work fine also focus event not click event(I don't know why..)

Endlong

The hide parameter in the delay option is just for the time the tooltip closes after the mouseout event. So it doesn't disapper when you keep the mouse on the element and stays the given time after you mouseout. – Accompany