Question

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

我有div按钮，当我.mouseenter()第一次想要延迟500ms时，但是在500ms之后我想把它改成100ms。在.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并在500ms之后工具提示将出现，但也在1s之后我改变所有工具提示ms（所以我需要使用'destroy'）然后工具提示BTN1哪一个应该仍然可见（beouse my mouse is over 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进行测试，如果您不再需要它们，可以安全地删除它们如果我输入的值不正确，你可以很容易地调整它们，但主要的逻辑应该是：

首先，延迟是500毫秒。
当您在div上mouseenter时，延迟将在500ms后设置为100ms
当mouseover延迟时间将恢复到500毫秒

Bootstrap工具提示 - 动态延迟

1 个答案: