引导工具提示 - 动态延迟

Question

如何在 Bootstrap 中动态更改工具提示延迟？

我有带按钮的 div，当我第一次使用 .mouseenter() 时，我想要延迟 500 毫秒，但在 500 毫秒后我想将其更改为 100 毫秒。在.mouseleave() 我希望它回到 500 毫秒。

它可以工作，但使用工具提示（'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/ 上找到一个很好的例子，在他们的编辑器中，他们有非常好的按钮工具提示。

编辑

我编辑了小提琴以获得更好的 ms 并感受我的意思。 所以，这就是我得到的： 我将 BTN1 悬停在 500 毫秒后会出现工具提示，但在 1 秒后我会更改所有工具提示毫秒（所以我需要使用“销毁”），然后 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. 起初，延迟为 500 毫秒。

2. 当您在 div 上mouseenter 时，延迟将在 500 毫秒后设置为 100 毫秒

3. 当您mouseover 时，延迟将恢复到 500 毫秒