Using Bootstrap Tooltip with AngularJS Function

Question

I am trying to use Bootstrap tooltip in my application. My application uses AngularJS. I currently have the following:

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

I think I need to use

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

However, I am not sure. Even when I add the line above, my code does not work. I am trying to avoid using a bootstrap user interface as it has more than what I need. However, if I had to include only part of the tooltip, I would be open to this. However, I cannot figure out how to do this.

Can someone show me how to get Bootstrap Tooltip to work with AngularJS?

Answer 1

In order for tooltips to work in the first place, you must initialize them in your code. Ignoring AngularJS for a second, you'll get hints for working in jQuery:

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

This will also work in an AngularJS application if it does not display Angular content (e.g. ng-repeat). In this case, you need to write a directive to handle this. Here is a simple directive that worked for me:

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

Then all you have to do is include the "tooltip" attribute in the element for which you want the tooltip to display:

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

Hope this helps!

Answer 2

The best solution I could come up with is to include the onmouseenter attribute in your element as follows:

 <button type="button" class="btn btn-default" data-placement="left" title="Tooltip on left" onmouseenter="$(this).tooltip('show')"> </button> 

Answer 3

The simple answer is with UI Bootstrap ( ui.bootstrap.tooltip )

There seem to be very complex answers to this question. Here is what worked for me.

• Install UT Bootstrap - $ bower install angular-bootstrap

• Inject UI Bootstrap as a dependency - angular.module('myModule', ['ui.bootstrap']);

• Use the uib-tooltip directive in your html.

---

 <button class="btn btn-default" type="button" uib-tooltip="I'm a tooltip!"> I'm a button! </button> 

Answer 4

If you are creating an Angular application, you can use jQuery, but there are many good reasons to try to avoid it in favor of more Angular driven paradigms. You can continue to use the styles provided by bootstrap, but replace jQuery plugins with native Angular using the Bootstrap UI

Include CSS files Boostrap, Angular.js and 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.imtqy.com/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> 

Make sure you enter ui.bootstrap when creating your module as follows:

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

Then you can use Angular directives instead of the data attributes obtained by 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 at Plunker

---

User Interface Download Prevention

jQuery.min.js (94kb) + Bootstrap.min.js (32kb) also giving you more than you need and much more than ui-bootstrap.min.js (41kb) .

And the time taken to load the modules is just one aspect of performance.

If you really want to download the necessary modules, you can "Create an assembly" and select tooltips from the Bootstrap-UI website . Or you can study the source code for tooltips and choose what you need.

Here is a miniature custom assembly using hints and templates (6kb)

Answer 5

Have you included Bootstrap JS and 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> 

If you haven't downloaded them yet, then Angular UI ( http://angular-ui.imtqy.com/bootstrap/ ) may not be too expensive. I use this with my Angular app and it has a hint directive. Try using 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> 

Answer 6

I wrote a simple corner directive that worked well for us.

Here is a demo: http://jsbin.com/tesido/edit?html,js,output

Directive (for 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 text (prevents empty tooltips) if (jQuery.trim(title)) element.tooltip(); }) element.on('$destroy', function() { element.tooltip('destroy'); delete attrs.$$observers['title']; }); } }); 

Note. If you are using Bootstrap 4, on lines 6 and 11 above you need to replace tooltip('destroy') tooltip('dispose') dispose tooltip('dispose') (thanks to user1191559 for this update )

Just add bootstrap-tooltip as an attribute to any element with title . Angular will track changes to the title but otherwise will pass the tooltip processing to Bootstrap.

It also allows you to use any of Bootstrap 's own tooltip options as data- usual manner of Bootstrap.

Markup :

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

It’s clear that it doesn’t have all the complex bindings and advanced integration that AngularStrap and UI Bootstrap offer, but this is a good solution if you already use Bootstrap JS in your Angular application and you just need a basic tooltip bridge for the entire application without changing the controllers or mouse event management.

Answer 7

You can use the selector option for applications with dynamic single-page pages:

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

if a selector is provided, tooltip objects will be delegated to the specified goals. In practice, this is used to enable dynamic HTML to add tooltips.

Answer 8

You can create a simple directive as follows:

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

Then add your custom directive if necessary:

 <button my-tooltip></button> 

Answer 9

You can do this with AngularStrap , which

is a set of native directives that seamlessly integrate Bootstrap 3.0+ into your AngularJS 1.2+ application.

You can enter the entire library as follows:

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

Or just pull the tooltip function like this:

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

Demonstration in fragments of the stack

 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> 

Answer 10

add $("[data-toggle=tooltip]").tooltip(); to the appropriate controller.

Answer 11

 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> 

Answer 12

Remember one thing, if you want to use the bootstrap tooltip in angularjs - this is the order of your scripts, if you use jquery-ui, it should be:

• JQuery
• JQuery user interface
• Bootstap

Tried and tested

Answer 13

Only read this if prompted dynamically

i.e. <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

I had a problem with dynamic tooltips that were not always updated in the view. For example, I was doing something like this:

It does not work consistently

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

And activate it like this:

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

However, since my users array would change my tooltips, it was not always updated. I tried all the corrections in this thread, and others - with no luck. It seems that a glitch occurred only in 5% of cases, and it was almost impossible to repeat.

Unfortunately, these tips are critical to my project, and showing the wrong tip can be very bad.

What seemed like a problem

Bootstrap copied the value of the title property to the new data-original-title attribute and removed the title property (sometimes) when I activated toooltips. However, when my title={{ person.tooltip }} changes, the new value will not always be updated in the data-original-title property. I tried disabling the tooltips and reactivating them, destroying them, binding to this property directly ... that's it. However, each of them either did not work or created new problems; such as the title and data-original-title attributes, which are deleted and unrelated to my object.

What worked

Perhaps the ugliest code I've ever expressed, but solved this small but significant issue for me. I run this code every time the tooltip is updated with new data:

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

What essentially happens here:

• Wait a while (1500 ms) to complete the digest cycle and update the title .
• If there is a title property that is not empty (i.e. it has changed), copy it to the data-original-title property so that it is picked up by the Bootstrap tools.
• Reactivating tooltips

Hope this long answer helps someone who may have struggled just like me.

Answer 14

Try the tooltip (ui.bootstrap.tooltip). See Angular Directives for Bootstrap

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

It is recommended that you avoid JavaScript at the top of AngularJS

Answer 15

AnguleStrap does not work in IE8 with angularjs version 1.2.9, so do not use this if your application must support IE8

Answer 16

impproving @aStewartDesign answer:

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

There is no need for jquery, its late underder, but I thought that since this is the top voted, I have to point this out.

Answer 17

install dependencies:

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

then add scripts to 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" ] 

then create script.js

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

reboot the server.