Bootstrap-Taste Tooltip ausblenden bei Klick

Question

Auf meiner Website habe ich einige Tasten. Wenn ein Benutzer auf die Schaltfläche klickt, wird ein Modal geöffnet. Wenn ein Benutzer die Schaltfläche bewegt, wird eine QuickInfo angezeigt.

Ist diesen Code verwenden:

<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> 

Dies funktioniert, aber das Problem ist nur, dass der Tooltip sichtbar bleibt, nachdem die Schaltfläche geklickt wird, und die modale dargestellt ist. Sobald das Modal geschlossen ist, wird der Tooltip wieder ausgeblendet.

Wie kann dies verhindert werden? Ich möchte nur, dass der Tooltip beim Schweben angezeigt wird und nicht immer wenn das zugehörige Modal sichtbar ist.

Answer 1

Es wurde behoben mit.

Das Problem war, dass der Fokus auf der Schaltfläche bleibt, wenn das Modal geöffnet ist. Durch Ändern des Auslösers in den Schwebeflug wird das Problem gelöst.

Answer 2

Verwenden Sie keine Datenattribute von mehreren Plugins für dasselbe Element. Zum Beispiel kann eine Schaltfläche nicht beide einen Tooltip haben und ein Modal umschalten. Verwenden Sie dazu ein Umbruchelement.

Answer 3

Sie sollten das Modal manuell mit einer On-Click-Funktion öffnen und den Tooltip manuell über jquery ausblenden. So nehmen Sie die modalen Makel aus der Schaltfläche Attribute wie so:

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

und öffnen Sie dann die modal mit Ihrer eigenen Jquery Onclick-Funktion sowie die Tooltip zugleich verbergen wie so:

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

Hier ist eine Geige, um Ihnen diese Funktion zu zeigen Fiddle

Answer 4

Wenn Sie den Tooltip, bevor eine Aktion schließen möchten, können dies nutzen:

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

Zum Beispiel möchte ich den Tooltip schließen, bevor offenen modale, hier mein Code:

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

Answer 5

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