Korzystanie z podpowiedzi Bootstrap w AngularJS

90

Próbuję użyć podpowiedzi Bootstrap w mojej aplikacji. Moja aplikacja korzysta z AngularJS Obecnie mam:

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

Myślę, że muszę użyć

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

Jednak nie jestem pewien. Nawet jeśli dodam powyższą linię, mój kod nie działa. Staram się unikać używania bootstrapu UI, ponieważ ma więcej niż potrzebuję. Jednak gdybym miał dołączyć tylko element podpowiedzi, byłbym na to otwarty. Jednak nie wiem, jak to zrobić.

Czy ktoś może mi pokazać, jak sprawić, by Bootstrap Tooltip działał z AngularJS?

user2871401
źródło
4
Bez używania Angular-UI Bootstrap, będziesz musiał wykonać wszystkie powiązania dla swoich wydarzeń. Jeśli nie chcesz używać UI Bootstrap, ponieważ ma więcej niż potrzebujesz, czy rozważałeś ładowanie tylko tych części, których potrzebujesz: github.com/angular-ui/bootstrap/tree/master/src/popover
TheSharpieOne

Odpowiedzi:

151

Aby podpowiedzi działały w pierwszej kolejności, musisz je zainicjować w swoim kodzie. Ignorując AngularJS na sekundę, w ten sposób można uzyskać podpowiedzi do pracy w jQuery:

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

Będzie to również działać w aplikacji AngularJS, o ile nie jest to treść renderowana przez Angular (np .: ng-repeat). W takim przypadku musisz napisać dyrektywę, która to obsłuży. Oto prosta dyrektywa, która zadziałała dla mnie:

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');
            });
        }
    };
});

Następnie wszystko, co musisz zrobić, to dołączyć atrybut „tooltip” do elementu, w którym ma się pojawić podpowiedź:

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

Mam nadzieję, że to pomoże!

aStewartDesign
źródło
Niezłe rozwiązanie! Zastąpiłem app.directive dyrektywą angular.module ('tooltip', [])., Aby uruchomić ją w mojej aplikacji.
Beanwah
Niezłe rozwiązanie. Czy możemy dodać do niego trochę css, aby zmienić podpowiedź?
1
Można dodać $(element).tooltip({html: 'true', container: 'body'})przed wywołaniem podpowiedzi jako przykład dostarczania niestandardowych opcji.
Vajk Hermecz
1
element.tooltip()może być używany zamiast jQuery.
Brian
1
Cóż za piękna odpowiedź
Gimmly
58

Najlepszym rozwiązaniem, jakie udało mi się wymyślić, jest dodanie atrybutu „onmouseenter” do elementu w następujący sposób:

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>
gabeodess
źródło
1
Boostrap JS to biblioteka jQuery. Przynajmniej było to w Bootstrap 3.
gabeodess
1
Działa również z Angular 2+. Dzięki!
Songtham T.
33

Prosta odpowiedź - za pomocą UI Bootstrap ( ui.bootstrap.tooltip )

Wydaje się, że istnieje kilka bardzo złożonych odpowiedzi na to pytanie. Oto, co zadziałało dla mnie.

  1. Zainstaluj Bootstrap UI -$ bower install angular-bootstrap

  2. Wstaw UI Bootstrap jako zależność - angular.module('myModule', ['ui.bootstrap']);

  3. Użyj dyrektywy uib-tooltip w swoim html.


<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>
Derek Soike
źródło
2
Brak jQuery, używając czystego Angulara i ui-bootstrap; Właśnie tego szukałem, dzięki
Rsh
Jedyne rozwiązanie, które u mnie zadziałało. Dziękuję Ci! (@Kondal - tak, działa bez jQuery).
Nick Grealy,
28

Jeśli budujesz kątowym aplikację, można użyć jQuery, ale jest wiele dobrych powodów, aby unikać go na rzecz bardziej kanciastych napędzanych paradygmatów. Możesz nadal używać stylów dostarczonych przez bootstrap, ale zastąp wtyczki jQuery natywnym angularem, używając UI Bootstrap

Uwzględnij pliki Boostrap CSS, Angular.js i ui.Bootstrap.js:

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

Upewnij się, że wykonałeś wstrzyknięcie ui.bootstrappodczas tworzenia modułu w następujący sposób:

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

Następnie możesz użyć dyrektyw kątowych zamiast atrybutów danych zebranych przez jQuery:

<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 w Plunkerze


Unikanie UI Bootstrap

jQuery.min.js (94kb) + Bootstrap.min.js (32kb) również daje więcej, niż potrzebujecie, i znacznie więcej niż ui-bootstrap.min.js (41kb) .

A czas spędzony na pobieraniu modułów to tylko jeden aspekt wydajności.

Jeśli naprawdę chciałeś załadować tylko potrzebne moduły, możesz „Utwórz kompilację” i wybrać podpowiedzi ze strony Bootstrap-UI . Możesz też przejrzeć kod źródłowy podpowiedzi i wybrać to, czego potrzebujesz.

Tutaj zminimalizowana niestandardowa kompilacja z tylko etykietkami narzędzi i szablonami (6kb)

KyleMit
źródło
Warto zauważyć, że w chwili pisania tego tekstu wersja 0.12.1 jest przeznaczona dla wersji 1.2 Angular. gałąź 0.13 będzie przeznaczona dla Angular 1.3+, ale nowy opiekun nadal nad tym pracuje (i robi świetną robotę!)
Nick
11

Czy dołączyłeś Bootstrap JS i jQuery?

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

Jeśli jeszcze ich nie załadowałeś, Angular UI ( http://angular-ui.github.io/bootstrap/ ) może nie być zbyt dużym obciążeniem. Używam tego z moją aplikacją Angular i ma dyrektywę Tooltip. Spróbuj użyćtooltip="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
źródło
Dzięki @prototype! Miałem zamiar wybrać odpowiedź @gabeodess, ale wolę to rozwiązanie, ponieważ nie mówi wprost, że wymaga jQuery, co sprawia, że ​​jest to nieco mniej powiązane i nieco łatwiejsze do zmiany na w pełni kątowe rozwiązanie w przyszłości.
hatsrumandcode
8

Napisałem prostą dyrektywę kątową, która dobrze nam się sprawdziła.

Oto demo: http://jsbin.com/tesido/edit?html,js,output

Dyrektywa (dla 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'];
    });
  }
});

Uwaga: Jeśli używasz Bootstrap 4, na liniach 6 i 11 powyżej będziesz musiał wymienić tooltip('destroy')z tooltip('dispose')(dzięki user1191559 tego upadate )

Po prostu dodaj bootstrap-tooltipjako atrybut do dowolnego elementu z rozszerzeniem title. Angular będzie monitorować zmiany titlew pliku, ale poza tym przekaże obsługę podpowiedzi do Bootstrap.

Pozwala to również na użycie jakichkolwiek rodzimych opcji podpowiedzi Bootstrap jako data-atrybutów w normalny sposób Bootstrap.

Znacznik :

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

Oczywiście nie ma to wszystkich wyszukanych powiązań i zaawansowanej integracji, które oferują AngularStrap i UI Bootstrap, ale jest to dobre rozwiązanie, jeśli już używasz JS Bootstrap w swojej aplikacji Angular i potrzebujesz tylko podstawowego pomostu z podpowiedziami w całej aplikacji bez modyfikowanie kontrolerów lub zarządzanie zdarzeniami myszy.

brandonjp
źródło
1
Próbowałem tego użyć i wystąpił Error: cannot call methods on tooltip prior to initialization; attempted to call method 'destroy'błąd.
Chris,
@CD Hmm ... Nie jestem jeszcze w stanie odtworzyć tego błędu. Dodałem ten adres URL demonstracji do odpowiedzi: jsbin.com/tesido/edit?html,js,output Jeśli wiesz, czym różni się Twój kod, daj mi znać, a zobaczę, czy mogę pomóc. Nawiasem mówiąc, demo używa Angular v1.2, Bootstrap v3.3, jQuery v2.1
brandonjp
1
Dziękuję, był to jedyny w tych przykładach, który aktualizuje podpowiedź dynamicznie, jeśli tytuł zmienia się poprzez powiązanie.
dalcam
1
BTW dla BS4, musisz zamienić linię: element.tooltip('destroy'); z element.tooltip('dispose');w obu miejscach.
dalcam
4

Możesz użyć selector opcji dla dynamicznych aplikacji jednostronicowych:

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

jeśli podano selektor, obiekty etykietki zostaną delegowane do określonych obiektów docelowych. W praktyce jest to używane, aby umożliwić dodawanie podpowiedzi do dynamicznej zawartości HTML.

rinat.io
źródło
4

Możesz utworzyć prostą dyrektywę, taką jak ta:

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

Następnie dodaj własną dyrektywę tam, gdzie jest to konieczne:

<button my-tooltip></button>
Emanuele Paratore
źródło
3

Możesz to zrobić za pomocą AngularStrap which

to zestaw natywnych dyrektyw, które umożliwiają bezproblemową integrację Bootstrap 3.0+ z aplikacją AngularJS 1.2+. ”

Możesz wstrzyknąć całą bibliotekę w ten sposób:

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

Lub użyj tylko funkcji podpowiedzi w następujący sposób:

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

Demo w 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
źródło
2

Najprościej dodać $("[data-toggle=tooltip]").tooltip();do odpowiedniego kontrolera.

zied.hosni
źródło
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
źródło
3
Dodaj wyjaśnienie do swojej odpowiedzi.
André Kool
1

Pamiętaj, że jeśli chcesz używać podpowiedzi bootstrap w angularjs, to kolejność skryptów, jeśli używasz jquery-ui, powinna to być:

  • jQuery
  • jQuery UI
  • Bootstap

Jest wypróbowany i przetestowany

user6706
źródło
1

Przeczytaj ten tekst tylko wtedy, gdy przypisujesz podpowiedzi dynamicznie

to znaczy <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

Miałem problem z dynamicznymi podpowiedziami, które nie zawsze były aktualizowane wraz z widokiem. Na przykład robiłem coś takiego:

To nie działało konsekwentnie

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

I aktywując go tak:

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

Jednak ponieważ moja tablica ludzi zmieniłaby się, moje podpowiedzi nie zawsze byłyby aktualizowane. Próbowałem każdej poprawki w tym wątku i innych bez powodzenia. Wydawało się, że usterka występuje tylko w około 5% przypadków i była prawie niemożliwa do powtórzenia.

Niestety, te podpowiedzi mają kluczowe znaczenie dla mojego projektu, a wyświetlanie nieprawidłowych podpowiedzi może być bardzo złe.

Co wydawało się być problemem

Bootstrap kopiował wartość titlewłaściwości do nowego atrybutu data-original-titlei usuwał titlewłaściwość (czasami), gdy aktywowałem toooltips. Jednak gdy my title={{ person.tooltip }}zmieniłby nową wartość, nie zawsze byłaby aktualizowana we właściwości data-original-title. Próbowałem dezaktywować podpowiedzi i ponownie je aktywować, zniszczyć, powiązać bezpośrednio z tą właściwością ... wszystko. Jednak każdy z nich albo nie działał, albo stworzył nowe problemy; takie jak atrybuty titlei data-original-titlesą usuwane i nie są związane z moim obiektem.

Co zadziałało

Być może najbardziej brzydki kod, jaki kiedykolwiek pchnąłem, ale rozwiązał ten mały, ale istotny problem. Uruchamiam ten kod za każdym razem, gdy podpowiedź jest aktualizowana o nowe dane:

$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);

Zasadniczo dzieje się tutaj:

  • Poczekaj trochę czasu (1500 ms) na zakończenie cyklu podsumowania i titlezaktualizowanie s.
  • Jeśli istnieje titlewłaściwość, która nie jest pusta (tj data-original-title. Uległa zmianie), skopiuj ją do właściwości, aby została pobrana przez narzędzia Bootstrap.
  • Ponownie aktywuj podpowiedzi

Mam nadzieję, że ta długa odpowiedź pomoże komuś, kto mógł walczyć tak jak ja.

Matt
źródło
1

Wypróbuj etykietkę (ui.bootstrap.tooltip). Zobacz dyrektywy Angular dla Bootstrap

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

Zaleca się unikanie kodu JavaScript w górnej części AngularJS

Asha Joshi
źródło
1

aby otrzymywać podpowiedzi do odświeżania po zmianie modelu , po prostu używam data-original-titlezamiast title.

na przykład

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

zwróć uwagę, że inicjalizuję użycie podpowiedzi w ten sposób:

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

wersje:

  • AngularJS 1.4.10
  • bootstrap 3.1.1
  • jQuery: 1.11.0
zim
źródło
0

AngularStrap nie działa w IE8 z angularjs w wersji 1.2.9, więc nie używaj tego, jeśli Twoja aplikacja musi obsługiwać IE8

Tron Diggy
źródło
0

doskonała odpowiedź @aStewartDesign:

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

Nie ma potrzeby korzystania z jquery, jest to późna odpowiedź, ale doszedłem do wniosku, że skoro jest to najczęściej wybierane miejsce, powinienem to zaznaczyć.

aXul
źródło
0

zainstaluj zależności:

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

następnie dodaj skrypty w swoim angular-cli.json

"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"
    ]

następnie utwórz plik script.js

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

teraz zrestartuj serwer.

Danilo Thiago Alves de Oliveir
źródło
zła wersja kątowa, oryginalne pytanie dotyczy AngularJS nie Angular
Jose Luis Berrocal
0

Ze względu na funkcję podpowiedzi musisz powiedzieć angularJS, że używasz jQuery.

Oto twoja dyrektywa:

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

a oto jak korzystać z dyrektywy:


<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>
Iman Shafiei
źródło