Afficher popup si la souris survole un élément pour une période de temps

Je me demandais comment faire pour afficher une popup/tipbox lorsqu'une souris a été planait au-dessus d'un élément pour une période de temps, par exemple de pseudo-code:

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

Ce que j'ai fait jusqu'à présent, mais elle ne fonctionne pas efficacement, si j'ai passez la souris et déplacez la souris rapidement, il continue à afficher le popup/tipbox.

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

EDIT: Bounty ajouté.

OriginalL'auteur MacMac | 2011-02-09

  1. 19

    Cela semble fonctionner pour moi:

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

    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;
    }
    Excellent, bounty être attribué à 23 heures, merci!
    Bounty attribué 🙂
    cool!!
    souhaitez cud voter plus d'une fois !

    OriginalL'auteur nico

  2. 1

    Essayez ceci:

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

    Et le code html doit être:

    <a href="#" id="thelink" onmouseover="show_tipbox('#thelink','#tipbox');">The link</a>
<div id="tipbox" onmouseout="hide_tipbox('#tipbox');">Tipbox Content</div>

    OriginalL'auteur Bora Demircan

  3. -2

    Vous pouvez essayer de Ce plugin - il est écrit par l'un des auteurs d'un très bon jQuery livre, donc devrait être bon. Les démos prometteurs.

    OriginalL'auteur belugabob