Javascript 一段时间后隐藏工具提示

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

<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')}});

及

但我想我知道为什么这些都不起作用。可能是因为

.tooltip

或

id=tooltip*

被动态添加到DOM中

参考：

---

添加这样一个函数

$('[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 answer的提示，我终于做到了：

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

需要注意的几点：

我将“mouseover”应用于每个div，因为用户将鼠标悬停在div中的内容上

我在

parent div

中搜索.tooltip，因为

tooltip

被添加为同级

---

我通过查看chrome中inspect下的元素来了解这一点。不确定这是否完全是万无一失的，是否适用于其他浏览器

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

---

if子句是可选的，这使得此代码仅在焦点不在textfield上时有效。否则，工具提示将继续显示

是您的javascript/jquery代码在任何侦听器中还是在页面运行后立即显示，因为如果是这样，您可能需要将代码放入.ready（）函数中，该函数类似于$（document）.ready（function（）{//code goes here}）；我正在使用window.onload=initialize_function（）来初始化此代码。请尝试使用$（document）.find（'.tooltip'）.fadeOut（）；不起作用。我认为这是因为文档中没有“.tooltip”可供查找。“.tooltip”只有在鼠标悬停后才会添加到文档中。嘿，Zoheiry，谢谢你的回答。我对它做了进一步的修改以使其工作（参见我的答案）。请编辑您的答案以反映更改，以便我可以接受您的答案。如果我相信你的回答，那是不公平的。

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

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