如果鼠标hover在元素上一段时间，则显示弹出窗口

我想知道如何在鼠标hover在元素上一段时间后显示弹出/提示框，例如伪代码：

if mouseover if hovered for more than 2 seconds --> show popup/tipbox else ---> cancel mouseover else if mouseout --> reset timer/cancel mouseover 

到目前为止我已经完成了这项工作，但它无法有效工作，如果我快速移动并移动鼠标，它仍然会显示弹出/提示框。

 $('a[rel=tip]').live('mouseover mouseout', function(e) { if(e.type == 'mouseover') { var mouseTime = setTimeout(function() { $('.tipbox').slideDown('fast'); }, 1000); } else if(e.type == 'mouseout') { if(mouseTime) { cancelTimeout(mouseTime); mouseTime = null; $('.tipbox').slideUp('fast'); } } }); 

编辑： Bounty补充道。

Answer 1

这似乎对我有用：

http://jsfiddle.net/eydMC/3/

HTML

 Hover me for 2 seconds! 

JS

 var tooltipTimeout; $("#someelem").hover(function() {tooltipTimeout = setTimeout(showTooltip, 2000);}, hideTooltip); function showTooltip() { var tooltip = $("
I'm the tooltip!
"); tooltip.appendTo($("#someelem")); } function hideTooltip() { clearTimeout(tooltipTimeout); $("#tooltip").fadeOut().remove(); } 

CSS

 #someelem { cursor: pointer; } .tooltip { display: block; position: absolute; background-color: rgb(130, 150, 200); padding: 5px; } 

Answer 2

试试这个：

 function show_tipbox (thelink,tipbox) { var timer; timer = setTimeout(function(){ $(tipbox).stop(true, true).fadeIn('normal'); }, 300); $(thelink).mouseout(function(){ clearTimeout(timer); }); } function hide_tipbox (tipbox) { $(tipbox).stop(true, true).fadeOut('normal'); } 

而html代码应该是：

 The link 
Tipbox Content 

Answer 3

你可以试试这个插件 – 它是由一本非常好的jQuery书的作者之一写的，所以应该是好的。 演示看起来很有希望。