ho avuto lo stesso problema, ma alla fine si avvicinò con questa soluzione:
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));
});
Essenzialmente quello che fa è:
- Disabilitare l'evento predefinito onMouseOver per il tooltip
- Aggiungi un nuovo mouseOver-evento per il tooltip che è in ritardo con setTimeout()
- Aggiungi un nuovo mouseOut-evento che annulla il timeout (questo impedisce il tooltip da mostrare nel caso il mouse a sinistra dell'area di destinazione già prima che il ritardo ellapsed)
- BONUS: Si aggiunge anche un "closedelay" simile al "OpenDelay" alias "predelay" utilizzando la stessa tecnica
event.stopImmediatePropagation();
è necessaria solo in alcuni casi. per esempio. se vuoi che l'elemento tooltip rimanga visibile mentre tieni il mouse su IT (dopo l'apertura). Se lo si desidera, registrare gli stessi eventi di passaggio del mouse sul suggerimento: target.tooltip({ open: function (event, ui) { ui.tooltip.hover(..., ...); } });
- p.s. puoi anche associare diverse di queste chiamate come
on
e off
.
- È possibile sostituire
target
all'interno delle funzioni evento da this
o $(this)
. Ma non sono sicuro e non l'ho provato; potrebbe non funzionare dopotutto.
- Se non è necessario il closeDelay semplicemente eliminare le righe che contengono
closeTimeoutId
o closedelay
e rimuovere mouseout
in target.off('mouseover mouseout');
o impostarlo su 0
- Lo stesso vale per se non è necessario OpenDelay ... proprio il contrario circa
fonte
2013-08-06 17:53:05
Se l'effetto non è importante, '$ (" #elementid ") .tooltip ({show: {delay: 2500}});' è sufficiente. – SNag