Bootstrap button tooltip hide on click

Question

Sul mio sito ho alcuni pulsanti. Quando un utente fa clic sul pulsante, si apre una modale. Quando un utente passa il pulsante, viene mostrato un suggerimento.

è l'uso di questo codice:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default" data-toggle="modal" data-target="#DeleteUserModal"> 
    <span class="glyphicon glyphicon-remove"></span> 
</button> 

<div>modal</div> 

<script> 
$(document).ready(function(){ 
    $('[rel="tooltip"]').tooltip(); 
}); 
</script> 

Questo funziona, ma l'unico problema è che la descrizione comando rimane visibile dopo il pulsante viene premuto, e viene mostrato il modal. Non appena il modale è chiuso, il suggerimento è di nuovo nascosto.

Come evitare questo? Voglio solo che il tooltip sia mostrato al passaggio del mouse e non tutto il tempo in cui la modal correlata è visibile.

Answer 1

Risolto utilizzando.

$(document).ready(function(){ 
    $('[rel=tooltip]').tooltip({ trigger: "hover" }); 
}); 

Il problema era che la messa a fuoco rimane sul pulsante quando la modale è aperta. La modifica del trigger su hover risolve il problema.

Answer 2

Non utilizzare gli attributi dati di più plug-in sullo stesso elemento. Ad esempio, un pulsante non può avere entrambi un suggerimento e attivare una modale. Per fare ciò, usa un elemento di avvolgimento.

Answer 3

È necessario aprire manualmente il modale con una funzione su clic e nascondere manualmente il suggerimento tramite jquery. Quindi prendere la commutazione modale attributi fuori dal pulsante mi piace così:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default"> 
    <span class="glyphicon glyphicon-remove"></span> 
</button> 

e quindi aprire il modal con la propria funzione onclick jQuery così come nascondere il tooltip al tempo stesso in questo modo:

$(document).ready(function(){ 
    $('[rel="tooltip"]').tooltip(); 
    $('[rel="tooltip').on('click', function() { 
    $(this).tooltip('hide'); 
    $("#DeleteUserModal").modal(); 
    }); 
}); 

Ecco un violino per mostrarvi questo lavoro Fiddle

Answer 4

Se si desidera chiudere il tooltip prima di un'azione, può utilizzare questo:

$('[data-toggle="tooltip"]').tooltip("hide"); 

Per esempio, voglio chiudere il tooltip prima modale aperta, qui il mio codice:

function OpenModal() { 
    $('[data-toggle="tooltip"]').tooltip("hide"); 
    $("#myModal").modal(); 
} 

Answer 5

$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip({ trigger: "hover" }); 
});