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:

http://jsfiddle.net/eydmc/3/

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

Popular posts from this blog

python - Scipy curvefit RuntimeError:Optimal parameters not found: Number of calls to function has reached maxfev = 1000 -

c# - How to add a new treeview at the selected node? -

java - netbeans "Please wait - classpath scanning in progress..." -