一段时间后隐藏工具提示答案

【问题标题】：Hide tooltip after some time一段时间后隐藏工具提示
【发布时间】：2015-12-15 16:36:08
【问题描述】：

我想要一个效果，当有人将鼠标悬停在一个元素上时，他会看到一个工具提示几秒钟，然后工具提示就会消失，即使鼠标仍在元素上也是如此。这就是我所拥有的：

<div data-sentence-tooltip="yes" data-tooltip-content: "some content"> some text </div>
$('[data-sentence-tooltip="yes"]').tooltip({title: function(){return $(this).attr('data-tooltip-content')}});

根据其他相关的 SO 问题，我尝试了以下两个：

setTimeout(function(){$(".tooltip").fadeOut("fast");}, 2000);

和

jQuery.fn.delay = function(time,func){
    return this.each(function(){
        setTimeout(func,time);
    });
};

$('[id^="tooltip"]').delay(2000, function(){
    $('[id^="tooltip"]').fadeOut('fast');
    }
);

但我想我知道为什么这些都不起作用。可能是因为 .tooltip 或 id=tooltip* 被即时添加到 DOM 中。

参考：

【问题讨论】：

是您在任何侦听器中或页面运行时的 javascript/jquery 代码，因为如果是这样，您可能需要将代码放在看起来像这样 $(document) 的 .ready() 函数中.ready(function(){//代码放在这里});
我正在使用 window.onload = initialize_function() 这段代码。
尝试使用 $(document).find('.tooltip').fadeOut();
不起作用。我认为这是因为文档中没有“.tooltip”可以找到。 “.tooltip”只有在鼠标悬停后才会添加到文档中。

标签： javascript jquery html css

【解决方案1】：

从 Zoheiry 的回答中得到启发，这就是我最终所做的：

$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
    setTimeout(function(){
    $('#enclosingParentDiv').find('.tooltip').fadeOut('fast');
  }, 1000);
});

注意几点：

我将“鼠标悬停”应用于每个 div，因为用户将鼠标悬停在 div 中的内容上
我在parent div 中搜索.tooltip，因为tooltip 被添加为同级。

【讨论】：

【解决方案2】：

像这样添加一个函数

$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
  // if the tooltip is a child of the element that is being hovered on
  // then write this.
  setTimeout(function(){
    $(this).find('.tooltip').fadeOut();
  }, 2000);

  // if the tooltip is a sibling of the element being hovered on
  // write this
  setTimeout(function(){
    $(this).parent().find('.tooltip').fadeOut();
  }, 2000);
});

这可确保您的代码仅在您将鼠标悬停在显示它的项目上后才查找 .tooltip。

【讨论】：

嗨 Zoheiry，感谢您的回答。我进一步修改它以使其工作（见我的回答）。您能否编辑您的答案以反映更改，以便我接受您的答案。如果我将您的回答归功于我，那将是不公平的。

【解决方案3】：

我通过查看 chrome 中的检查元素发现了这一点。不确定这是否完全万无一失并且可以与其他浏览器一起使用

$('input').on('mouseover', function() {
    if(!$(this).is(":focus"))
        $("#" + $(this).attr("aria-describedby")).delay(800).fadeOut(800);
});

if 子句是可选的，它使此代码仅在焦点不在文本字段上时才有效。否则工具提示会继续显示

【讨论】：