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

问题

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?

回答1:

use this

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

回答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

回答3:

IE has issues with dangling commas, perhaps try removing that and seeing if that helps:

$( document ).tooltip({ delay:2000 });

来源：https://stackoverflow.com/questions/14388147/i-need-to-add-a-predelay-to-jquery-ui-tooltips-but-cant-seem-to-figure-it-out

标签

jquery

jquery-ui

tooltip