CODEWITHSUNDEEP
twitter-bootstrap-3twitter-bootstrap-tooltip
Quoter
Quoter

Reputation: 4302

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?

Upvotes: 9

Views: 29326

Answers (4)

Arun Sharma
Arun Sharma

Reputation: 41

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.

Upvotes: 0

Shaffron
Shaffron

Reputation: 107

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

Upvotes: -1

ksbn
ksbn

Reputation: 61

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

Upvotes: 1

Gabriel S.
Gabriel S.

Reputation: 1943

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

Upvotes: 26

Related Questions