Question

我正在使用Tooltip()中的Twitter-Bootstrap。当悬停在元素上时，会显示tooltip。但除非你将鼠标移开，否则它会停留在那里。

如何在弹出几秒后让它消失，而不是等到鼠标离开元素？

Answer 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

Answer 2

如果在延迟时间内发生多次mouseEnter和mouseleave事件，则会多次调用“hide”，并且工具提示可能比预期更早关闭。必须放弃旧电话。

$('.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

Answer 3

这是简单的答案

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

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

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

Answer 4

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

使用 Bootstrap 4 工具提示这对我来说非常好

sp.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

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

如何使bootstrap的工具提示在悬停2秒后消失

4 个答案: