Question

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

<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。

价：

Answer 1

从Zoheiry的回答中得到启示，这就是我最终的所作所为：

https://www.facebook.com/sharer/sharer.php?u=[your-urlencoded-url]

需要注意几点：

我将“mouseover”应用于每个div，因为用户将鼠标悬停在div中的内容上
我在$('[data-sentence-tooltip="yes"]').on('mouseover', function(){ setTimeout(function(){ $('#enclosingParentDiv').find('.tooltip').fadeOut('fast'); }, 1000); });中搜索.tooltip，因为parent div被添加为兄弟。

Answer 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。

Answer 3

我通过查看被检查的镀铬元素解决了这一问题。不知道这是否完全安全，是否可以与其他浏览器一起使用

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

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

一段时间后隐藏工具提示

3 个答案: