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?
angularjs
twitter-bootstrap
twitter-bootstrap-tooltip
user2871401
źródło
źródło
Odpowiedzi:
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!
źródło
$(element).tooltip({html: 'true', container: 'body'})
przed wywołaniem podpowiedzi jako przykład dostarczania niestandardowych opcji.element.tooltip()
może być używany zamiast jQuery.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>
źródło
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.
Zainstaluj Bootstrap UI -
$ bower install angular-bootstrap
Wstaw UI Bootstrap jako zależność -
angular.module('myModule', ['ui.bootstrap']);
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>
źródło
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.bootstrap
podczas 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)
źródło
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>
źródło
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')
ztooltip('dispose')
(dzięki user1191559 tego upadate )Po prostu dodaj
bootstrap-tooltip
jako atrybut do dowolnego elementu z rozszerzeniemtitle
. Angular będzie monitorować zmianytitle
w 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.
źródło
Error: cannot call methods on tooltip prior to initialization; attempted to call method 'destroy'
błąd.element.tooltip('destroy');
zelement.tooltip('dispose');
w obu miejscach.Możesz użyć
selector
opcji dla dynamicznych aplikacji jednostronicowych:jQuery(function($) { $(document).tooltip({ selector: '[data-toggle="tooltip"]' }); });
źródło
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>
źródło
Możesz to zrobić za pomocą AngularStrap which
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>
źródło
Najprościej dodać
$("[data-toggle=tooltip]").tooltip();
do odpowiedniego kontrolera.źródło
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>
źródło
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ć:
Jest wypróbowany i przetestowany
źródło
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ść
title
właściwości do nowego atrybutudata-original-title
i usuwałtitle
właściwość (czasami), gdy aktywowałem toooltips. Jednak gdy mytitle={{ person.tooltip }}
zmieniłby nową wartość, nie zawsze byłaby aktualizowana we właściwościdata-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 atrybutytitle
idata-original-title
są 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:
title
zaktualizowanie s.title
właściwość, która nie jest pusta (tjdata-original-title
. Uległa zmianie), skopiuj ją do właściwości, aby została pobrana przez narzędzia Bootstrap.Mam nadzieję, że ta długa odpowiedź pomoże komuś, kto mógł walczyć tak jak ja.
źródło
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
źródło
aby otrzymywać podpowiedzi do odświeżania po zmianie modelu , po prostu używam
data-original-title
zamiasttitle
.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:
źródło
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
źródło
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ć.
źródło
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.
źródło
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>
źródło