twitter-bootstrap-3 - 如何使引导程序的工具提示在悬停 2 秒后消失

Question

我正在使用Tooltip()from Twitter-Bootstrap。将鼠标悬停在元素上时，会出现 a tooltip。但除非您将鼠标移开，否则它会一直存在。

我怎样才能让它在它弹出几秒钟后消失，而不是等到鼠标离开元素？

Answer 1

Bootstrap 提供了操作工具提示的方法，例如$('#element').tooltip('hide')

如果将data-trigger='manual'属性添加到元素，则可以控制工具提示的显示或隐藏方式。

$('.bstooltip').mouseenter(function(){
    var that = $(this)
    that.tooltip('show');
    setTimeout(function(){
        that.tooltip('hide');
    }, 2000);
});

$('.bstooltip').mouseleave(function(){
    $(this).tooltip('hide');
});

小提琴

Answer 2

如果在延迟时间内发生多个 mouseEnter 和 mouseleave 事件，则“隐藏”被多次调用，并且可能是工具提示比预期更早关闭。必须丢弃较旧的调用。

$('.bstooltip').on('shown.bs.tooltip', function () {
    var that = $(this);

    var element = that[0];
    if(element.myShowTooltipEventNum == null){
        element.myShowTooltipEventNum = 0;
    }else{
        element.myShowTooltipEventNum++;
    }
    var eventNum = element.myShowTooltipEventNum;

    setTimeout(function(){
        if(element.myShowTooltipEventNum == eventNum){
            that.tooltip('hide');
        }
        // else skip timeout event
    }, 2000);
});

小提琴

Answer 3

setTimeout 对于第一个工具提示只能工作一次，我们需要使用 setInterval 来代替。

这对我来说非常适合 Bootstrap 4 工具提示

$(document).ready( function () {
    $('[data-toggle="tooltip"]').tooltip();   
    setInterval(function () {
         $('[data-toggle="tooltip"]').tooltip('hide'); 
    }, 2000);
});

工具提示会在 2 秒后出现并消失。

Answer 4

这是简单的答案

$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});

仅在延迟选项中提供隐藏参数。

它工作正常也焦点事件而不是单击事件（我不知道为什么..）