jquery - Show popup if the mouse is hovered over an element for a period of time -
i'm wondering how show popup/tipbox when mouse has been hovered on element period of time, e.g. pseudo code:
if mouseover if hovered more 2 seconds --> show popup/tipbox else ---> cancel mouseover else if mouseout --> reset timer/cancel mouseover
i've done far, doesn't work effectively, if hover , move mouse quickly, still show 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 added.
this seems work me:
html
<span id="someelem">hover me 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 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; }
Comments
Post a Comment