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 毫秒