jquery How to make a mouseenter that only works after 3 seconds and aborts on mouseleave

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

I want to make a tooltip. When the mou开发者_运维问答se 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!

---

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

---

Try this: http://jsfiddle.net/aYThd/