Verwenden des Bootstrap-Tooltips mit AngularJS

90

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?

user2871401
quelle
4
Ohne Angular-UI Bootstrap müssen Sie alle Bindungen für Ihre Ereignisse ausführen. Wenn Sie UI Bootstrap nicht verwenden möchten, weil es mehr enthält als Sie benötigen, haben Sie in Betracht gezogen, nur die Teile zu laden, die Sie benötigen: github.com/angular-ui/bootstrap/tree/master/src/popover
TheSharpieOne

Antworten:

151

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:

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

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:

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

Dann müssen Sie nur noch das Attribut "Tooltip" in das Element einfügen, auf dem der Tooltip angezeigt werden soll:

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>

Hoffentlich hilft das!

aStewartDesign
quelle
Schöne Lösung! Ich habe app.directive durch angular.module ('tooltip', []). Direktive ersetzt, damit es in meiner Anwendung funktioniert.
Beanwah
Schöne Lösung. Können wir CSS hinzufügen, um den Tooltip zu ändern?
1
Könnte $(element).tooltip({html: 'true', container: 'body'})vor dem Aufrufen von Tooltip Show als Beispiel für die Bereitstellung angepasster Optionen hinzugefügt werden .
Vajk Hermecz
1
element.tooltip()kann anstelle von jQuery verwendet werden.
Brian
1
Was für eine schöne Antwort
Gimmly
57

Die beste Lösung, die ich finden konnte, besteht darin, Ihrem Element ein "onmouseenter" -Attribut wie folgt hinzuzufügen:

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>
gabeodess
quelle
1
Boostrap JS ist eine jQuery-Bibliothek. Zumindest war es in Bootstrap 3.
gabeodess
1
Funktioniert auch mit Angular 2+. Vielen Dank!
Songtham T.
32

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.

  1. Installieren Sie UI Bootstrap -$ bower install angular-bootstrap

  2. Injizieren Sie UI Bootstrap als Abhängigkeit - angular.module('myModule', ['ui.bootstrap']);

  3. Verwenden Sie die Anweisung uib-tooltip in Ihrem HTML.


<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>
Derek Soike
quelle
2
Keine jQuery mit reinem Angular und UI-Bootstrap; Dies ist, was ich gesucht habe, danke
Rsh
Die einzige Lösung, die für mich funktioniert hat. Danke dir! (@Kondal - ja, es funktioniert ohne jQuery).
Nick Grealy
28

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:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

Stellen Sie sicher, dass Sie injiziert haben, ui.bootstrapwenn Sie Ihr Modul wie folgt erstellen:

var app = angular.module('plunker', ['ui.bootstrap']);

Dann können Sie Winkelanweisungen anstelle von Datenattributen verwenden, die von jQuery erfasst wurden:

<button type="button" class="btn btn-default" 
        title="Tooltip on left" data-toggle="tooltip" data-placement="left"
        tooltip="Tooltip on left" tooltip-placement="left" >
  Tooltip on left
</button>

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)

KyleMit
quelle
Es ist erwähnenswert, dass v 0.12.1 zum Zeitpunkt des Schreibens für v1.2 von Angular gilt. Der 0.13-Zweig wird für Angular 1.3+ sein, aber der neue Betreuer arbeitet noch daran (und macht einen tollen Job!)
Nick
11

Haben Sie Bootstrap JS und jQuery aufgenommen?

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

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 mittooltip="tiptext"

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left"
        tooltip="This is a Bootstrap tooltip"
        tooltip-placement="left" >
            Tooltip on left
</button>
Prototyp
quelle
Danke @prototype! Ich wollte mich für eine @gabeodess-Antwort entscheiden, bevorzuge aber diese Lösung, da sie nicht ausdrücklich besagt, dass jQuery benötigt wird, wodurch dies etwas weniger gekoppelt ist und in Zukunft für eine vollständig eckige Lösung etwas einfacher zu ändern ist.
Hatsrumandcode
8

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

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

Hinweis: Wenn Sie mit Bootstrap 4, wo die Linien 6 und 11 oben müssen Sie ersetzen tooltip('destroy')mit tooltip('dispose')(Dank user1191559 für dieses upadate )

Fügen Sie einfach bootstrap-tooltipein Attribut zu einem Element mit einem hinzu title. Angular überwacht Änderungen am title, ü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 :

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

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.

brandonjp
quelle
1
Ich habe versucht, dies zu verwenden, und habe eine Error: cannot call methods on tooltip prior to initialization; attempted to call method 'destroy'Fehlermeldung erhalten.
Chris
@CD Hmm ... Ich kann diesen Fehler noch nicht reproduzieren. Ich habe diese Demo-URL zur Antwort hinzugefügt: jsbin.com/tesido/edit?html,js,output Wenn Sie wissen, wie sich Ihr Code unterscheidet, lassen Sie es mich wissen und ich werde sehen, ob ich helfen kann. Übrigens verwendet die Demo Angular v1.2, Bootstrap v3.3, jQuery v2.1
brandonjp
1
Vielen Dank, dies war das einzige in diesen Beispielen, das den Tooltip dynamisch aktualisiert, wenn sich der Titel durch Bindung ändert.
Dalcam
1
Übrigens für BS4 müssen Sie die Leitung tauschen: element.tooltip('destroy'); mit element.tooltip('dispose');an beiden Stellen.
Dalcam
4

Sie können die selector Option für dynamische Einzelseitenanwendungen verwenden:

jQuery(function($) {
    $(document).tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

Wenn ein Selektor bereitgestellt wird, werden Tooltip-Objekte an die angegebenen Ziele delegiert. In der Praxis wird dies verwendet, um dynamischen HTML-Inhalten das Hinzufügen von QuickInfos zu ermöglichen.

rinat.io
quelle
4

Sie können eine einfache Anweisung wie folgt erstellen:

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

Fügen Sie dann Ihre benutzerdefinierte Direktive hinzu, wo dies erforderlich ist:

<button my-tooltip></button>
Emanuele Paratore
quelle
3

Sie können dies mit AngularStrap tun, die

ist eine Reihe nativer Anweisungen, die die nahtlose Integration von Bootstrap 3.0+ in Ihre AngularJS 1.2+ App ermöglichen. "

Sie können die gesamte Bibliothek folgendermaßen einfügen:

var app = angular.module('MyApp', ['mgcrea.ngStrap']); 

Oder ziehen Sie nur die Tooltip-Funktion wie folgt auf:

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']); 

Demo in Stack Snippets

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

ilndboi
quelle
2

Am einfachsten ist es $("[data-toggle=tooltip]").tooltip();, dem betreffenden Controller etwas hinzuzufügen .

zied.hosni
quelle
1

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

Ravi Kumar
quelle
3
Bitte fügen Sie Ihrer Antwort eine Erklärung hinzu.
André Kool
1

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:

  • jQuery
  • jQuery-Benutzeroberfläche
  • Bootstap

Es hat sich bewährt

user6706
quelle
1

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

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div> 

Und aktivieren Sie es so:

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

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 titleEigenschaft in ein neues Attribut data-original-titleund entfernte die titleEigenschaft (manchmal), wenn ich die Tooltips aktivierte. Wenn sich jedoch mein title={{ person.tooltip }}Wert ändert, wird der neue Wert nicht immer in der Eigenschaft aktualisiert data-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 die titleunddata-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:

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

Was hier im Wesentlichen passiert, ist:

  • Warten Sie einige Zeit (1500 ms), bis der Digest-Zyklus abgeschlossen ist title s aktualisiert ist.
  • Wenn eine titleEigenschaft nicht leer ist (dh geändert wurde), kopieren Sie sie in die data-original-titleEigenschaft, damit sie von den Bootstrap-Toolips übernommen wird.
  • Reaktivieren Sie die Tooltips

Hoffe, diese lange Antwort hilft jemandem, der vielleicht so gekämpft hat wie ich.

Matt
quelle
1

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

Asha Joshi
quelle
1

Um Tooltips zu aktualisieren, wenn sich das Modell ändert , verwende ich einfach data-original-titleanstelle 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:

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

Versionen:

  • AngularJS 1.4.10
  • Bootstrap 3.1.1
  • jquery: 1.11.0
zim
quelle
0

AngularStrap funktioniert in IE8 mit AngularJS Version 1.2.9 nicht. Verwenden Sie dies daher nicht, wenn Ihre Anwendung IE8 unterstützen muss

Tron Diggy
quelle
0

@aStewartDesign Antwort verbessern:

.directive('tooltip', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.hover(function(){
        element.tooltip('show');
      }, function(){
        element.tooltip('hide');
      });
    }
  };
});

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.

aXul
quelle
0

Installieren Sie die Abhängigkeiten:

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

Fügen Sie als Nächstes Skripte in Ihre angle-cli.json ein

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

Erstellen Sie dann eine script.js

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

Starten Sie jetzt Ihren Server neu.

Danilo Thiago Alves de Oliveir
quelle
falsche Winkelversion, ursprüngliche Frage ist über AngularJS nicht Angular
Jose Luis Berrocal
0

Aufgrund der Tooltip-Funktion müssen Sie angleJS mitteilen, dass Sie jQuery verwenden.

Dies ist Ihre Anweisung:

myApp.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('mouseenter', function () {
                jQuery.noConflict();
                (function ($) {
                    $(element[0]).tooltip('show');
                })(jQuery);
            });
        }
    };
});

und so wird die Richtlinie verwendet:


<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>
Iman Shafiei
quelle