CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Skodsgn
Skodsgn

Reputation: 981

Bootstrap tooltips - dynamic delay

How to dynamically change tooltip delay in Bootstrap?

I have div with buttons, when i .mouseenter() on it first time i want a delay of 500ms, but after 500ms i want to change it to 100ms. On .mouseleave() i want it back to 500ms.

Its working but with tooltip('destroy') its killing already shown tooltip.

How to figure it out?

here is fiddle: https://jsfiddle.net/0nep4tk3/2/

var $btns = $(".buttons").find('button');
$(".buttons").on('mouseenter', function(e){
        setTimeout(function(){
            setTooltips({show:100, hide:10});
        },750);  
    }).on('mouseleave',function(){
        setTooltips({show:500, hide:100});
    })


    function setTooltips(opt){
        $btns.tooltip('destroy');
        $btns.tooltip({
            trigger:'hover',
            delay:{show:opt.show, hide:opt.hide},
            container:'body',
        }); 
    }

A nice example you can find on https://webflow.com/, in their editor they have very nice tooltips for buttons.

EDIT

I edited fiddle for better ms and feeling what i mean. So, this is what i got: I hover BTN1 and after 500ms tooltip will appear but also after 1s i change all tooltip ms ( so i need use 'destroy') and then tooltip for BTN1 which one should still be visible (beouse my mouse is over BTN1 ) will disapear. I want him to stay after tooltips ms change. I just want to get nice tooltip feeling for buttons.

Upvotes: 3

Views: 3129

Answers (1)

valepu
valepu

Reputation: 3315

Without having to destroy and recreate tooltips every time you can edit the delay option.
If i have understood correctly your request, this should do:

var $btns = $(".buttons").find('button');

$btns.tooltip({
    trigger:'hover',
    delay: {show: 500, hide: 500},
    container:'body',
}); 
$(".buttons").on('mouseenter', function(e){
    setTimeout(function(){
        console.log("100");
        setTooltips({show: 100, hide: 100});
    },500); 
}).on('mouseleave',function(e){
    console.log("500");
    setTooltips({show: 500, hide: 500});
});


function setTooltips(opt){
    $btns.each(function(){
        $(this).data('bs.tooltip').options.delay=opt;
        console.log($btns.data('bs.tooltip').options.delay);
    })
}

I have left the console.log for testing purposes, you can safely remove them if you don't need them anymore.
If the values i put are incorrect you can easily tweak them but the main logic should be this:

  1. At first, delay is 500ms.

  2. When you mouseenter on the div the delay will be set to 100ms after 500ms

  3. when you mouseover the delay will be back to 500ms

Upvotes: 2

Related Questions