jquery ui tooltip manual open/close

Question

c'è un modo per aprire manualmente chiudere il tooltip di jquery ui? Voglio solo che reagisca a un evento click accendendo/spegnendo. Puoi disassociare tutti gli eventi del mouse e li ricollegherà quando chiamerai .tooltip ('apri'), anche se non dovresti inizializzare o impostare eventi imo, poiché se provi a eseguire .tooltip ('apri') senza inizializzarlo, si lamenta rumorosamente per non essere inizializzato.

Answer 1

jltwoo, posso suggerire di utilizzare due diversi indicatori booleani per abilitare l'apertura automatica e la chiusura automatica? Con questa modifica il codice sarà simile a questa:

(function($) { 
    $.widget("custom.tooltipX", $.ui.tooltip, { 
    options: { 
     autoShow: true, 
     autoHide: true 
    }, 

    _create: function() { 
     this._super(); 
     if(!this.options.autoShow){ 
     this._off(this.element, "mouseover focusin"); 
     } 
    }, 

    _open: function(event, target, content) { 
     this._superApply(arguments); 

     if(!this.options.autoHide){ 
     this._off(target, "mouseleave focusout"); 
     } 
    } 
    }); 

}(jQuery)); 

In questo modo, l'inizializzazione del tooltip come:

$(someDOM).tooltipX({ autoHide:false }); 

si mostra da sola quando il mouse si trova sopra l'elemento, ma è necessario chiudere manualmente esso.

Se si desidera controllare manualmente le azioni sia di apertura e chiusura, si può semplicemente utilizzare:

$(someDOM).tooltipX({ autoShow:false, autoHide:false }); 

Answer 2

La descrizione del comando ha un'opzione di disabilitazione. Beh, l'ho usato e qui è il codice:

$('a').tooltip({ 
    disabled: true  
}).click(function(){  
    if($(this).tooltip('option', 'disabled')) 
     $(this).tooltip('option', {disabled: false}).tooltip('open'); 
    else 
     $(this).tooltip('option', {disabled: true}).tooltip('close'); 
}).hover(function(){ 
    $(this).tooltip('option', {disabled: true}).tooltip('close'); 
}, function(){ 
    $(this).tooltip('option', {disabled: true}).tooltip('close'); 
}); 

Answer 3

correlati al mio altro commento, ho guardato nel codice originale e raggiunto manuale di apertura/chiusura, estendendo il widget e l'aggiunta di un'opzione Nascondi automaticamente con la versione jQuery UI v1 .10.3. Fondamentalmente rimuovo solo i listener del mouse che sono stati aggiunti in _create e la chiamata interna _open.

Edit: Separato AutoHide e Autoshow come due bandiere separati come suggerito da @MscG

demo qui: http://jsfiddle.net/BfSz3/

(function($) { 
    $.widget("custom.tooltipX", $.ui.tooltip, { 
    options: { 
     autoHide:true, 
     autoShow: true 
    }, 

    _create: function() { 
     this._super(); 
     if(!this.options.autoShow){ 
     this._off(this.element, "mouseover focusin"); 
     } 
    }, 

    _open: function(event, target, content) { 
     this._superApply(arguments); 

     if(!this.options.autoHide){ 
     this._off(target, "mouseleave focusout"); 
     } 
    } 
    }); 

}(jQuery)); 

Ora, quando si inizializza è possibile impostare il tooltip manualmente mostra o nascondi impostando autoHide: false:

$(someDOM).tooltipX({ autoHide:false }); 

E solo eseguire direttamente/chiudi le chiamate standard aperti nel codice, se necessario altrove

$(someDOM).tooltipX("open"); // displays tooltip 
$(someDOM).tooltipX("close"); // closes tooltip 

Un semplice aggiornamento rapido, fino a quando ho il tempo di fare richiesta ufficiale di pull, questo avrà a che fare.

Answer 4

Se si vuole separare solo gli eventi e woudn't piacerebbe fare il proprio tooltip personalizzato.

$("#some-id").tooltip(tooltip_settings) 
      .on('mouseout focusout', function(event) { 
        event.stopImmediatePropagation(); 
      }); 

$("#some-id").attr("title", "Message"); 
$("#some-id").tooltip("open"); 

mouseout blocca la tooltop scomparendo spostando il cursore del mouse

focusOut blocca la tooltop scomparendo dalla navigazione da tastiera