Ich versuche, den Bootstrap-Tooltip in einer meiner Apps zu verwenden. Meine App verwendet AngularJS. Derzeit habe ich Folgendes:
<button type="button" class="btn btn-default"
data-toggle="tooltip" data-placement="left"
title="Tooltip on left">
Tooltip on left
</button>
Ich denke ich muss verwenden
$("[data-toggle=tooltip]").tooltip();
Ich bin mir jedoch nicht sicher. Selbst wenn ich die obige Zeile hinzufüge, funktioniert mein Code nicht. Ich versuche zu vermeiden, UI-Bootstrap zu verwenden, da es mehr hat, als ich brauche. Wenn ich jedoch nur den Tooltip einfügen müsste, wäre ich dafür offen. Ich kann jedoch nicht herausfinden, wie das geht.
Kann mir jemand zeigen, wie der Bootstrap-Tooltip mit AngularJS funktioniert?
angularjs
twitter-bootstrap
twitter-bootstrap-tooltip
user2871401
quelle
quelle
Antworten:
Damit die Tooltips überhaupt funktionieren, müssen Sie sie in Ihrem Code initialisieren. Wenn Sie AngularJS für eine Sekunde ignorieren, erhalten Sie auf diese Weise die Tooltips, die in jQuery funktionieren:
Dies funktioniert auch in einer AngularJS-App, solange der Inhalt nicht von Angular gerendert wird (z. B. ng-repeat). In diesem Fall müssen Sie eine Anweisung schreiben, um dies zu handhaben. Hier ist eine einfache Anweisung, die für mich funktioniert hat:
Dann müssen Sie nur noch das Attribut "Tooltip" in das Element einfügen, auf dem der Tooltip angezeigt werden soll:
Hoffentlich hilft das!
quelle
$(element).tooltip({html: 'true', container: 'body'})
vor dem Aufrufen von Tooltip Show als Beispiel für die Bereitstellung angepasster Optionen hinzugefügt werden .element.tooltip()
kann anstelle von jQuery verwendet werden.Die beste Lösung, die ich finden konnte, besteht darin, Ihrem Element ein "onmouseenter" -Attribut wie folgt hinzuzufügen:
quelle
Einfache Antwort - mit UI Bootstrap ( ui.bootstrap.tooltip )
Es scheint eine Reihe sehr komplexer Antworten auf diese Frage zu geben. Folgendes hat bei mir funktioniert.
Installieren Sie UI Bootstrap -
$ bower install angular-bootstrap
Injizieren Sie UI Bootstrap als Abhängigkeit -
angular.module('myModule', ['ui.bootstrap']);
Verwenden Sie die Anweisung uib-tooltip in Ihrem HTML.
quelle
Wenn Sie eine Angular App Gebäude sind, Sie können jQuery verwenden, aber es gibt viele guten Gründe , um zu versuchen , es von kantigen angetriebenen Paradigmen zugunsten zu vermeiden. Sie können weiterhin die von Bootstrap bereitgestellten Stile verwenden, aber die jQuery-Plugins mithilfe von UI-Bootstrap durch native Winkel ersetzen
Fügen Sie die Boostrap-CSS-Dateien Angular.js und ui.Bootstrap.js hinzu:
Stellen Sie sicher, dass Sie injiziert haben,
ui.bootstrap
wenn Sie Ihr Modul wie folgt erstellen:Dann können Sie Winkelanweisungen anstelle von Datenattributen verwenden, die von jQuery erfasst wurden:
Demo in Plunker
Vermeiden von UI-Bootstrap
jQuery.min.js (94 KB) + Bootstrap.min.js (32 KB) bietet Ihnen außerdem mehr als Sie benötigen und viel mehr als ui-bootstrap.min.js (41 KB) .
Der Zeitaufwand für das Herunterladen der Module ist nur ein Aspekt der Leistung.
Wenn Sie wirklich nur die Module laden möchten, die Sie benötigen, können Sie "Build erstellen" und Tooltips von der Bootstrap-UI-Website auswählen . Oder Sie können den Quellcode nach QuickInfos durchsuchen und wählen aus, was Sie benötigen.
Hier ein minimierter Custom Build mit nur den Tooltips und Vorlagen (6kb)
quelle
Haben Sie Bootstrap JS und jQuery aufgenommen?
Wenn Sie diese noch nicht geladen haben, ist die Angular-Benutzeroberfläche ( http://angular-ui.github.io/bootstrap/ ) möglicherweise nicht viel Aufwand. Ich verwende das mit meiner Angular-App und sie hat eine Tooltip-Direktive. Versuchen Sie es mit
tooltip="tiptext"
quelle
Ich habe eine einfache Winkelrichtlinie geschrieben, die für uns gut funktioniert hat.
Hier ist eine Demo: http://jsbin.com/tesido/edit?html,js,output
Richtlinie (für Bootstrap 3) :
Hinweis: Wenn Sie mit Bootstrap 4, wo die Linien 6 und 11 oben müssen Sie ersetzen
tooltip('destroy')
mittooltip('dispose')
(Dank user1191559 für dieses upadate )Fügen Sie einfach
bootstrap-tooltip
ein Attribut zu einem Element mit einem hinzutitle
. Angular überwacht Änderungen amtitle
, übergibt aber ansonsten die Tooltip-Behandlung an Bootstrap.Auf diese Weise können Sie auch eine der nativen Bootstrap-Tooltip-Optionen als
data-
Attribute auf normale Bootstrap-Weise verwenden.Markup :
Natürlich verfügt dies nicht über alle aufwändigen Bindungen und erweiterten Integrationen, die AngularStrap und UI Bootstrap bieten, aber es ist eine gute Lösung, wenn Sie Bootstraps JS bereits in Ihrer Angular-App verwenden und nur eine grundlegende Tooltip-Brücke über Ihre gesamte App benötigen Controller ändern oder Mausereignisse verwalten.
quelle
Error: cannot call methods on tooltip prior to initialization; attempted to call method 'destroy'
Fehlermeldung erhalten.element.tooltip('destroy');
mitelement.tooltip('dispose');
an beiden Stellen.Sie können die
selector
Option für dynamische Einzelseitenanwendungen verwenden:quelle
Sie können eine einfache Anweisung wie folgt erstellen:
Fügen Sie dann Ihre benutzerdefinierte Direktive hinzu, wo dies erforderlich ist:
quelle
Sie können dies mit AngularStrap tun, die
Sie können die gesamte Bibliothek folgendermaßen einfügen:
Oder ziehen Sie nur die Tooltip-Funktion wie folgt auf:
Demo in Stack Snippets
quelle
Am einfachsten ist es
$("[data-toggle=tooltip]").tooltip();
, dem betreffenden Controller etwas hinzuzufügen .quelle
quelle
Bitte denken Sie daran, wenn Sie den Bootstrap-Tooltip in anglejs verwenden möchten, ist die Reihenfolge Ihrer Skripte, wenn Sie auch jquery-ui verwenden, sollte dies sein:
Es hat sich bewährt
quelle
Lesen Sie dies nur, wenn Sie QuickInfos dynamisch zuweisen
dh
<div tooltip={{ obj.somePropertyThatMayChange }} ...></div>
Ich hatte ein Problem mit dynamischen Tooltips, die nicht immer mit der Ansicht aktualisiert wurden. Zum Beispiel habe ich so etwas gemacht:
Dies funktionierte nicht konsequent
Und aktivieren Sie es so:
Da sich mein People-Array jedoch ändern würde, würden meine Tooltips nicht immer aktualisiert. Ich habe jede Korrektur in diesem Thread und anderen ohne Glück versucht. Der Fehler schien nur in etwa 5% der Fälle aufzutreten und war fast unmöglich zu wiederholen.
Leider sind diese Tooltips für mein Projekt von entscheidender Bedeutung, und das Anzeigen eines falschen Tooltips kann sehr schlecht sein.
Was schien das Problem zu sein
Bootstrap kopierte den Wert der
title
Eigenschaft in ein neues Attributdata-original-title
und entfernte dietitle
Eigenschaft (manchmal), wenn ich die Tooltips aktivierte. Wenn sich jedoch meintitle={{ person.tooltip }}
Wert ändert, wird der neue Wert nicht immer in der Eigenschaft aktualisiertdata-original-title
. Ich habe versucht, die Tooltips zu deaktivieren und zu reaktivieren, zu zerstören und direkt an diese Eigenschaft zu binden ... alles. Jedes dieser Verfahren hat jedoch entweder nicht funktioniert oder neue Probleme verursacht. wie dietitle
unddata-original-title
Attribute beide und von meinem Objekt ungebundene entfernt werden.Was hat funktioniert?
Vielleicht der hässlichste Code, den ich je gepusht habe, aber er hat dieses kleine, aber erhebliche Problem für mich gelöst. Ich führe diesen Code jedes Mal aus, wenn der Tooltip mit neuen Daten aktualisiert wird:
Was hier im Wesentlichen passiert, ist:
title
s aktualisiert ist.title
Eigenschaft nicht leer ist (dh geändert wurde), kopieren Sie sie in diedata-original-title
Eigenschaft, damit sie von den Bootstrap-Toolips übernommen wird.Hoffe, diese lange Antwort hilft jemandem, der vielleicht so gekämpft hat wie ich.
quelle
Probieren Sie den Tooltip (ui.bootstrap.tooltip) aus. Siehe Angular-Anweisungen für Bootstrap
<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>
Es wird empfohlen, JavaScript-Code oben in AngularJS zu vermeiden
quelle
Um Tooltips zu aktualisieren, wenn sich das Modell ändert , verwende ich einfach
data-original-title
anstelle vontitle
.z.B
<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>
Beachten Sie, dass ich die Verwendung von Tooltips wie folgt initialisiere:
Versionen:
quelle
AngularStrap funktioniert in IE8 mit AngularJS Version 1.2.9 nicht. Verwenden Sie dies daher nicht, wenn Ihre Anwendung IE8 unterstützen muss
quelle
@aStewartDesign Antwort verbessern:
Es gibt keine Notwendigkeit für Fragen, es ist eine späte Antwort, aber ich dachte, da es die am besten gewählte ist, sollte ich darauf hinweisen.
quelle
Installieren Sie die Abhängigkeiten:
Fügen Sie als Nächstes Skripte in Ihre angle-cli.json ein
Erstellen Sie dann eine script.js
Starten Sie jetzt Ihren Server neu.
quelle
Aufgrund der Tooltip-Funktion müssen Sie angleJS mitteilen, dass Sie jQuery verwenden.
Dies ist Ihre Anweisung:
und so wird die Richtlinie verwendet:
quelle