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?

Gabriel S. · Accepted Answer · 2014-01-21T14:55:00.490

25

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

edited Jan 21 '14 at 14:55

answered Jan 21 '14 at 13:15

Gabriel S.

1,961
2
20
30

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); }` – Quoter Jan 21 '14 at 14:31
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. – Gabriel S. Jan 21 '14 at 17:24
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. – Quoter Jan 21 '14 at 17:45
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', //...})})' – Alexei Zababurin Nov 13 '15 at 06:55
Works when used together with `var tooltip = $('a[data-toggle="tooltip"]').tooltip();` and replacing `$('.bstooltip')` with `tooltip`. – Rok Strniša Apr 27 '16 at 19:39

score 1 · Answer 2 · answered Jan 09 '15 at 10:35

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

score 0 · Answer 3 · answered Apr 17 '21 at 07:50

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.

score -1 · Answer 4 · answered Aug 04 '16 at 02:49

-1

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

answered Aug 04 '16 at 02:49

Shaffron

97
1
3
11

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. – Hollul Apr 06 '21 at 09:53

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

4 Answers4