JqueryUI tooltip sul clic del pulsante invece del passaggio del mouse per apparire altrove

Question

Sto usando JQueryUI tooltip per visualizzare alcuni messaggi dinamici all'utente. Fondamentalmente voglio visualizzare il suggerimento sopra un campo di input quando un utente fa clic su un pulsante.

Il modo in cui l'ho codificato funziona solo quando si posiziona il puntatore del mouse sopra il pulsante e negli esempi di JQueryUI non vi è alcun aiuto per il raggiungimento di questo scenario. In che modo differisco dall'effetto hover e lo faccio funzionare con l'evento click del pulsante? Come posso raggiungere questo obiettivo?

Sto usando jquery-ui-1.9.0.custom.js e jquery-1.8.2.js per questo.

codice HTML: voglio visualizzare il messaggio in cima a questa finestra di input

<input id="myInput" type="text" name="myInput" value="0" size="7" /> 

Il pulsante che clicco in-fine di popup tooltip

<input id="myBtn" type="submit" name="myBtn" value="myBtn" title="this is not used" class="myBtn" /> 

codice jQuery

$(document).ready(function() { 
    $(".myBtn").tooltip({ 
       content: function() { 
        return '<span id="msg">Message</span>'; 
       }, 
       position: { 
        my: "center bottom", 
        at: "center top" 
       } 
      }); 
}); 

Answer 1

Il modo più semplice è rimuovere l'attributo titolo di myBtn e spostare il suggerimento su un altro elemento. Per esempio:

<a id="myTooltip" title="Message"></a> 

allora si può fare:

$('#myTooltip').tooltip({ 
    //use 'of' to link the tooltip to your specified input 
    position: { of: '#myInput', my: 'left center', at: 'left center' } 
}); 

$('#myBtn').click(function() { 
    $('#myTooltip').tooltip('open'); 
}); 

Allo stesso modo è possibile chiudere il tooltip con

$('#myTooltip').tooltip('close'); 

---

Per chiudere automaticamente il suggerimento dopo l'apertura si solo bisogno di chiama il metodo close all'interno dell'evento open:

$('#myTooltip').tooltip({ 
    open: function (e) { 
     setTimeout(function() { 
      $(e.target).tooltip('close'); 
     }, 1000); 
    } 
}); 

Uso e.target (come this non funzionerà all'interno della manifestazione open) e setTimeout() per impostare un limite di tempo dopo il quale il suggerimento si chiuderà.