如何使引导程序的工具提示在悬停 2 秒后消失答案

【问题标题】：How to make bootstrap's tooltip disappear after 2 seconds on hover如何使引导程序的工具提示在悬停 2 秒后消失
【发布时间】：2014-01-21 12:51:34
【问题描述】：

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

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

【问题讨论】：

标签： twitter-bootstrap-3 twitter-bootstrap-tooltip

【解决方案1】：

Bootstrap 提供 methods 用于操作工具提示，例如 $('#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');
});

Fiddle

【讨论】：

我在shown.bs.tooltip 事件中使用了您的建议。但它并没有消失。功能齐全：function toolTipIsVisible() { setTimeout( function () { $(this).tooltip('hide') }, 2000); }
不客气，虽然我想知道你为什么需要做这样的事情。我经常对仍然有这种行为的旧软件感到生气，因为它没有给你足够的时间在消失之前阅读内容。
因为工具提示挡住了对其他“事物”的查看。此外，你需要多少时间阅读一个单词或 5/6 的一行？设置为 5 秒。
我们可以在初始化脚本中添加选项，而不是为每个元素添加 data-trigger='manual' 属性：'$(document).ready(function() { $('[data- toggle="tooltip"]').tooltip({ trigger:'hover manual', //...})})'
与var tooltip = $('a[data-toggle="tooltip"]').tooltip(); 一起使用并将$('.bstooltip') 替换为tooltip 时有效。

【解决方案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);
});

Fiddle

【讨论】：

【解决方案3】：

setTimeout 只对第一个工具提示有效，我们需要使用 setInterval 来代替。

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

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

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

【讨论】：

【解决方案4】：

这里是简单的答案

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

只在延迟选项中给出隐藏参数。

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

【讨论】：

delay 选项中的 hide 参数仅适用于 mouseout 事件后工具提示关闭的时间。因此，当您将鼠标放在元素上并在鼠标移出后保持给定时间时，它不会消失。