JQuery setTimeout

Question

I would like to add a timeout to this hint code so that it only appears when the mouse hangs over it after a while, and not immediately ... I tried to add setTimeout() , but I could not figure out how to use clearTimeout() , so the tooltip is not hidden from the mouse. You can help?

 // ----------------------------------------------- // TOOLTIP MOUSE HOVER // ----------------------------------------------- function mcTooltip() { $('.mcTxb').mousemove(function(e) { var mcHoverText = $(this).attr('alt'); var mcTooltip = $('.mcTooltip'); $(mcTooltip).text(mcHoverText).show('fast'); $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); }).mouseout(function() { var mcTooltip = $('.mcTooltip'); $(mcTooltip).hide('fast'); }); } mcTooltip(); 

I tried this:

  // ----------------------------------------------- // TOOLTIP MOUSE HOVER // ----------------------------------------------- function mcTooltip() { $('.mcTxb').mousemove(function(e) { var mcHoverText = $(this).attr('alt'); var mcTooltip = $('.mcTooltip'); setTimeOut(function(){ $(mcTooltip).text(mcHoverText).show('fast'); }, 300); $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); }).mouseout(function() { var mcTooltip = $('.mcTooltip'); $(mcTooltip).hide('fast'); }); } mcTooltip(); 

Answer 1

When you use animation, you can use .delay() to defer the appearance of your tooltip:

 $(mcTooltip).text(mcHoverText).delay(1000).show('fast'); 

In your mouseout function mouseout use .stop to undo any existing delays or animations, and then hide the tooltip:

 $(mcTooltip).stop(true).hide('fast'); 

Answer 2

 var my_timer; $('.mcTxb').hover( function () { my_timer = setTimeout(function () { //do work here }, 500); }, function () { clearTimeout(my_timer); } ); 

It will wait half a second before doing anything when you mouseover an element and all that won't happen if you mouseout for half a second.

Answer 3

One option is to use the hoverIntent plugin to accomplish what you want.

Answer 4

• Use hover() instead, this is less code (and this is always good, IMO).

Same:

 function mcToolTip() { $(".mcTxb").hover(function(){ // mouseover stuff here $("element").delay(3000).show(); // 3 second delay, then show }, function(){ // mouseout stuff here }); } 

Answer 5

This question is old, but I thought I would answer it to others. The main reason the timeout did not work is the case of "setTimeOut". You cannot ride a camel. Its "setTimeout".

Answer 6

setTimeout does not work on mouseover or hover. It is safe to use .delay ().

 setTimeout(function(){ $(mcTooltip).text(mcHoverText).show('fast'); }, 300); // use this instead. $(mcTooltip).text(mcHoverText).delay(3000).show('fast');