jQuery menu hover off delay

Question

I'm using the below jQuery/javascript to control the hover functionality of a menu. When an "item-wrapper" item is hovered over, it display a tooltip submenu.

I wish to add two pieces of functionality to this code:

1) For the Tooltip to only appear after 500milliseconds of hovering over a menu item

2) For the user to be able to move off the tooltip and have it stay visible for about 1 second (thus giving them the option to move back over it 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 greatly appreciated

Answer 1

You can use setTimeout to delay the call. The tricky part is making sure to clear the timeouts correctly if the user re-hovers over the element, or hovers over a different one.

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