JQuery menu delays delay

Question

I am using jQuery / javascript below to control the menu hover functionality. When the item-wrapper hangs, it displays a tooltip submenu.

I want to add two functionality to this code:

1) So that the tooltip appears only after 500 milliseconds of hovering over a menu item

2) So that the user can remove the tooltip and remain visible for about 1 second (thus giving them the opportunity to go back before it disappears)

$(".item-wrapper").hover(function() { $('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE }, function() {//hide tooltip when the mouse moves off of the element $('#' + $(this).attr("rel") + '-tip').hide(); }); 

All help is much appreciated

Answer 1

You can use setTimeout to delay the call. The tricky part is to properly clear the timeouts if the user again hangs over an element or hangs on another.

 var timeouts = {}; $(".item-wrapper").hover(function() { var rel = $(this).attr("rel"); var el = $('#' + rel + '-tip'); if (timeouts[rel]) clearTimeout(timeouts[rel]); timeouts[rel] = setTimeout(function () { el.fadeIn("fast").show(); }, 500); }, function() { var rel = $(this).attr("rel"); var el = $('#' + rel + '-tip'); if (timeouts[rel]) clearTimeout(timeouts[rel]); timeouts[rel] = setTimeout(function () { el.hide() }, 1000); }); 

Answer 2

You might want to look into the hoverIntent plugin. Here is a brief description:

instead of immediately calling onMouseOver, it waits until the user mouse slows down enough before making a call

You can add a delay of 500 ms before showing a tooltip, but this is not necessary if you are just trying to avoid a random mouse. Here you can implement it.

 $(".item-wrapper").hoverIntent({ over: function() { $('#' + $(this).attr("rel") + '-tip').delay(500).fadeIn("fast").show(); }, timeout: 1000, // number = milliseconds delay before onMouseOut out: function() { $('#' + $(this).attr("rel") + '-tip').hide(); } }); 

Answer 3

Add .delay (500) to delay before .fadiIn,

Add one more delay at the beginning of the mouseleave function.

Answer 4

How about using jquery delay for the mouse, so change it to:

 function() {//hide tooltip when the mouse moves off of the element $('#' + $(this).attr("rel") + '-tip').delay(500).hide(); }); 

to delay the hover event is a bit trickier, you need to keep a timer. Something like that:

 $(function() { var timer; $(".item-wrapper").hover(function() { if (timer) { clearTimeout(timer); timer=null; } timer = setTimeout(function() { $('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show() },500); });