Bootstrap tooltips - dynamic delay

Question

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.

Answer 1

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