2013-01-17 7 views
9

Ho bisogno di aggiungere un predelay sulle mie tooltips dell'interfaccia utente jQuery. Sto usando la versione più recente (1.9) e vorrei che i suggerimenti si aprissero 2 secondi dopo che sono stati posizionati al passaggio del mouse.Ho bisogno di aggiungere una pre-release alle descrizioni dei comandi dell'interfaccia jQuery ma non riesco a capirlo.

io chiamo i suggerimenti in mio header utilizzando:

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

Ma quando vengono licenziati, non hanno alcun ritardo di sorta ... di aiuto?

risposta

21

uso questo

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

Se l'effetto non è importante, '$ (" #elementid ") .tooltip ({show: {delay: 2500}});' è sufficiente. – SNag

0

IE ha problemi con penzoloni virgole, forse provare a rimuovere che e vedere se questo aiuta:

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

Questo non ha funzionato per me .. Sono stato in grado di vedere il suggerimento però, ma il valore di ritardo non ha fatto differenza. La risposta accettata incorpora correttamente il ritardo. – SNag

+1

'predelay' non è l'attributo corretto. –

4

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