9

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?

Alberto Zaccagni
  • 30,779
  • 11
  • 72
  • 106
Quoter
  • 4,236
  • 13
  • 47
  • 69

4 Answers4

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

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
1

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

ksbn
  • 61
  • 1
  • 3
0

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.

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

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