Verwenden des Bootstrap-Tooltips mit AngularJS

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?

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!

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>

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>

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)

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>

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.

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.

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>

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>

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

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

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.

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

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

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

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

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.

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>