jquery - 如果鼠标悬停在元素上一段时间则显示弹出窗口

Question

我想知道当鼠标悬停在某个元素上一段时间时如何显示弹出窗口/提示框，例如伪代码:

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

编辑:已添加赏金。

Answer 1

This似乎对我有用:

HTML

<span id="someElem"> Hover me for 2 seconds! </span>

JS

var tooltipTimeout;
    
$("#someelem").hover(function()
{
    tooltipTimeout = setTimeout(showTooltip, 2000);
}, hideTooltip);
    
function showTooltip()
{
    var tooltip = $("<div id='tooltip' class='tooltip'>I'm the tooltip!</div>");
    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;
}