Ich habe ein Problem mit dem Tooltip von Bootstrap: Wenn ich auf eine Schaltfläche klicke, bleibt der Tooltip auch dann erhalten, wenn sich der Cursor außerhalb der Schaltfläche befindet. Ich habe in das Handbuch - Bootstraps Tooltip geschaut und wenn ich auf die Schaltflächen klicke, sehe ich das gleiche Problem. Gibt es eine Lösung, um dies zu beheben? Gerade im neuesten FF, IE ausprobiert.
javascript
twitter-bootstrap
tooltip
SilentCry
quelle
quelle
Antworten:
Dies liegt daran, dass
trigger
nicht eingestellt ist. Der Standardwert für den Trigger ist'hover focus'
, sodass der Tooltip nach dem Klicken auf eine Schaltfläche sichtbar bleibt, bis auf eine andere Schaltfläche geklickt wird, da die Schaltfläche aktiviert istfocused
.Alles was Sie tun müssen, ist
trigger
als'hover'
nur zu definieren . Unter dem gleichen Beispiel, auf das Sie verlinkt haben, ohne die QuickInfos beizubehalten, nachdem Sie auf eine Schaltfläche geklickt haben:das doc-Beispiel in einer Geige -> http://jsfiddle.net/vdzvvg6o/
quelle
Ich weiß über ein Jahr alt, aber ich konnte dies hier nicht mit Beispielen zum Laufen bringen. Ich musste folgendes verwenden:
Dies zeigt auch den Tooltip beim Hover wieder.
quelle
Hallo, ich habe wenig Lösung für dieses Problem. Wenn andere Lösungen nicht funktionieren, versuchen Sie einfach Folgendes:
Dies ist auch eine Lösung für Drag & Drop. Also ich hoffe das hilft jemandem :)
quelle
In meinem Fall wurde das Problem nur in Internet Explorer reproduziert: Unabhängig davon, welches Element (Eingabe, Div usw.) über einen Tooltip verfügt, wird der angezeigte Tooltip weiterhin angezeigt.
Ich habe im Web einige Lösungen gefunden, die empfehlen, .hide () als QuickInfo für Elemente zu verwenden. Klicken Sie auf das Ereignis, aber es ist eine schlechte Idee, wenn Sie zum selben Element zurückkehren
hat die ganze Magie gemacht !!! - wobei .myToolTippedElement das Element ist, das einen Tooltip ofCourse hat ...
quelle
in eckig 7 mit bootstrap 4 und jquery habe ich das gefunden und es funktioniert gut. Ich habe dispose verwendet, weil es zerstört, den Tooltip nicht verbirgt.
quelle
Versuchen Sie es mit ,
rel="tooltip"
anstattdata-toggle="tooltip"
denen gearbeitet in meinem Fall. Ich habedata-toggle="tooltip"
die Triggerbedingung als Schwebeflug verwendet und auch eingestellt, was in meinem Fall nicht funktioniert hat. Als ich meine Datenauswahl geändert habe, hat es funktioniert.HTML Quelltext:
JS Code // Tooltip $ ('. Btn'). Tooltip ({trigger: 'hover'});
Dadurch wird der feststeckende Tooltip definitiv entfernt.
quelle
Davids Antwort oben hat geholfen, mein Problem zu beheben. Ich hatte sowohl Hover- als auch Click-Ereignis auf der Schaltfläche. Firefox auf MAC hat sich so verhalten, wie ich es wollte. Das heißt, Tooltip anzeigen, wenn Sie den Mauszeiger bewegen, Tooltip nicht zum Klicken anzeigen. Wenn ich in anderen Browsern und Betriebssystemen auf klicke, wird der Tooltip angezeigt und bleibt angezeigt. Auch wenn ich die Maus zum Schweben auf andere Tasten bewege. Das hatte ich:
Dies ist die Lösung:
quelle
Sie können auch hinzufügen:
quelle
Arbeitslösung
quelle
Ich habe dieses Problem behoben, indem ich den Tooltip in der Klickereignisfunktion mit dem folgenden Code entfernt habe:
quelle
Ich verwende den Bootstrap-Tooltip in cycle.js und keiner der oben genannten Punkte hat bei mir funktioniert.
Ich musste das machen:
quelle
Das funktioniert bei mir:
Ich habe die Schaltfläche Speichern dynamisch deaktiviert, dann war das Problem.
quelle
quelle
Diese Lösung hat bei mir funktioniert.
Geige
Ich habe die meisten der in den vorherigen Antworten angegebenen Lösungen ausprobiert, aber keine davon hat für mich funktioniert.
quelle
Mein Problem ist in DataTable. Der folgende Code funktioniert für mich.
columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }
quelle
Sie können auch unten Methode zu verstecken Tooltip verwenden mouseleave , wie folgt:
quelle
In meinem Fall war dies die Lösung:
Ich habe diese Regel aus den Bootstrap-Dokumenten nicht befolgt:
quelle
Dies ist auch im HTML erreichbar, indem Folgendes hinzugefügt wird:
quelle
Sie können diesen Weg auch für alte Versionen verwenden, da die akzeptierte Antwort bei mir nicht funktioniert hat und ich diesen Code für mich selbst und seine Arbeit gut geschrieben habe.
quelle
Wenn jemand einen Tooltip einrichten möchte, der einige Zeit nach dem Klicken angezeigt wird, habe ich Folgendes getan:
quelle