I need to add a predelay to jQuery UI Tooltips but can't seem to figure it out

Question

I need to add a predelay on my jQuery UI tooltips. I am using the most recent version (1.9) and would like the tips to open 2 seconds after they are hovered over.

I am calling the tips in my header using:

<script>
    $(function() {
        $( document ).tooltip({ predelay:2000,});   
    });
</script>

But when they are fired, they do not have any delay whatsoever... any help?

Answer 1

use this

$( "#elementid" ).tooltip({
  show: {
    effect: "slideDown",
    delay: 250
  }
});

Answer 2

I had the same problem but finally came up with this solution:

var opendelay = 500;
var closedelay = 500;
var target = $('.selector');
target.tooltip({ /* ... */ });
target.off('mouseover mouseout');
target.on('mouseover', function(event) {
    event.stopImmediatePropagation();
    clearTimeout(target.data('closeTimeoutId'));
    target.data('openTimeoutId', setTimeout(function() { target.tooltip('open'); }, opendelay));
});
target.on('mouseout', function(event) {
    event.stopImmediatePropagation();
    clearTimeout(target.data('openTimeoutId'));
    target.data('closeTimeoutId', setTimeout(function() { target.tooltip('close'); }, closedelay));
});

Essentially what it does is:

• Disable the default onMouseOver event for the tooltip
• Add a new mouseOver-event for the tooltip which is delayed using setTimeout()
• Add a new mouseOut-event which cancels the timeout (this prevents the tooltip from showing in case the mouse left the target area already before the delay ellapsed)
• BONUS: It also adds a "closedelay" similar to the "opendelay" aka "predelay" using the same technique
• event.stopImmediatePropagation(); is only needed in some cases. eg. if you want the tooltip-element to stay visible while hovering IT (after it opened). If you want this, register the same hover events on the tooltip: target.tooltip({ open: function (event, ui) { ui.tooltip.hover(..., ...); } });
• p.s. you can also chain several of these calls like on and off.
• It might be possible to replace target inside the event-functions by this or $(this). But i'm not sure and haven't tried it; might not work after all.
• If you don't need the closeDelay simply delete the lines containing closeTimeoutId or closedelay and remove mouseout in target.off('mouseover mouseout'); or set it to 0
• The same goes for if you don't need openDelay ... just the other way around