Показать всплывающее окно, если мышь наведена на элемент в течение определенного периода времени

Question

Мне интересно, как показать всплывающее окно / всплывающую подсказку, когда мышь наведена на элемент в течение определенного периода времени, например, псевдокод:

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

Я уже сделал это,но это не работает эффективно, если я наведу курсор мыши и быстро переместлю курсор, он все равно покажет всплывающее окно / подсказку.

Answer 1

Мне кажется, это работает:

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

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-код должен быть:

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

Answer 3

Вы можете попробовать Этот плагин - он написан одним из авторов очень хорошей книги по jQuery, поэтому должен быть хорошим. Демоверсии выглядят многообещающе.