Tooltip bleibt manchmal auf der Seite auf Element im Inneren gleiten div

Question

Wir verwenden einen Bootstrap für eines des Projekts und ein Problem mit Tooltip-Plugin zur Verfügung gestellt. Es ist eigentlich kein Bug im Bootstrap sondern ein Problem mit der Situation, in der wir es benutzen.

Wir haben eine Gleitschiene, die in Inhalt Div geht. Und Schaltflächen zum Ausblenden/Anzeigen von Effekten mit einem Tooltip. Der Gleiteffekt basiert auf der jQuery UI-Folie.

Die Frage ist:

Wenn wir klicken auf Seitenleiste ausblenden Schaltfläche, und zur gleichen Zeit bewegt sich die Maus aus Schweben der Taste zum Zeitpunkt der Folienanimationen, dann einige Male der Tooltip versteckt nicht bekommt, und bleibt da drüben auf der Seite.

Dies passiert auch in der Seitenleiste angezeigt. Und wenn es passiert, sieht es sehr schlecht und fehlerhaft aus.

Wie können wir das beheben?

Answer 1

auf Bootstrap-Forum von Richard Beantwortet (https://github.com/r1ch0)

einfach manuell den Tooltip ausblenden, wenn Sie auf die Schaltfläche klicken, bevor Sie die Folie Animation auslösen.

 

$('#button').on('click', function() { 
    $(this).tooltip('hide') 
    $('#sidebar').slide() // replace with slide animation 
}) 
 

Kopiert von: https://github.com/twitter/bootstrap/issues/3446

Posted hier nur, weil jemand anderes es finden kann.

Answer 2

Wenn Sie die Bootstrap-Werkzeugspitze verwenden, dann, wie etwa eine Verzögerung Option hinzufügen:

jQuery('#example').popover(delay: { show: 100, hide: 100 }) 

Wenn die Werkzeugspitze wie von einem Alt-Tag in einem Bild ist, dann jQuery es zu entfernen.

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery("img").removeAttr("alt"); 
}); 
</script> 

Answer 3

Es scheint eine richtige Lösung zu sein (eine, die Sie nicht manuell aufräumen) auf https://github.com/twitter/bootstrap/pull/4104, wird hoffentlich bald veröffentlicht werden.

Answer 4

Ich verwendete Krunal Beitrag (+1 BTW), das half mir sehr, aber löste das Problem nicht vollständig.
Der Tooltip verschwindet, wenn ich auf den Knopf klicke, aber kommt zurück und bleibt wieder stecken, wenn meine Maus ihn schwebt, bis ich irgendwo anders klicke.

So habe ich herausgefunden, dass der Tooltip angezeigt, während schwebt, und auch während ein Element konzentriert.
Schließlich schrieb ich dieses:

$('button').on('click', function() { 
    $(this).blur() 
}) 

Und es funktioniert gut.
Danke.