Question

I thought this was simple, but it seems more complicated than expected.

I want to make a tooltip. When the mouse enters a div, there should popup a new div. When leaving the div, the new div must go away.
So far so good.
To make it complicated, the new div may only appear when the mouse is longer than 3 seconds on the div, if not, the mouseenter must be aborted.

This is my code at this moment:

$('.go_info').live("mouseenter", function(){
var q_tooltip_img = $(this).attr('id');
setTimeout( function()
{
$("#tooltip_"+q_tooltip_img).show();
}, 2000);
}); 

$('.go_info').live("mouseleave",function(){

var q_tooltip_img = $(this).attr('id');
$("#tooltip_"+q_tooltip_img).hide();    
});

thank you!

Answer 1

Try this

var mouseEnterTimer;
$('.go_info').live("mouseenter", function(){

  var q_tooltip_img = $(this).attr('id');
  mouseEnterTimer = setTimeout( function()
  {
     $("#tooltip_"+q_tooltip_img).show();
  }, 3000);

}); 

$('.go_info').live("mouseleave",function(){
  if(mouseEnterTimer)
    clearTimeout(mouseEnterTimer);

   var q_tooltip_img = $(this).attr('id');
   $("#tooltip_"+q_tooltip_img).hide();    
});