Bootstrap 工具提示 - 動態延遲

Question

如何在 Bootstrap 中動態更改工具提示延遲？

我有帶按鈕的 div，當我第一次使用.mouseenter()時，我希望延遲 500 毫秒，但在 500 毫秒后我想將其更改為 100 毫秒。 在.mouseleave()我希望它回到 500 毫秒。

它可以工作，但是使用 tooltip('destroy') 它的殺死已經顯示了工具提示。

如何弄清楚？

這是小提琴： 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',
        }); 
    } 

你可以在https://webflow.com/ 上找到一個很好的例子，在他們的編輯器中，他們有非常好的按鈕工具提示。

編輯

我編輯了小提琴以獲得更好的女士並感受我的意思。 所以，這就是我得到的：我懸停 BTN1 並在 500 毫秒后會出現工具提示，但在 1 秒后我更改了所有工具提示 ms（所以我需要使用“銷毀”）然后 BTN1 的工具提示應該仍然可見（因為我的鼠標結束 BTN1 ) 將消失。 我希望他在工具提示 ms 更改后留下來。 我只想為按鈕獲得不錯的工具提示感覺。

Answer 1

每次編輯延遲選項時都不必銷毀和重新創建工具提示。
如果我正確理解了您的要求，則應該這樣做：

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);
    })
} 

我已將 console.log 留作測試目的，如果您不再需要它們，您可以安全地刪除它們。
如果我輸入的值不正確，您可以輕松調整它們，但主要邏輯應該是這樣的：

1. 起初，延遲是500ms。

2. 當你mouseenter在DIV上的延遲將500毫秒后設置為100ms

3. 當您將mouseover ，延遲將回到 500 毫秒