Using Bootstrap Tooltip with AngularJS

Question

I am trying to use the Bootstrap tooltip in an app of mine. My app is using AngularJS Currently, I 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'm not sure. Even when I add the line above though, my code doesn't work. I'm trying to avoid using UI bootstrap as it has more than I need. However, if I had to include just the tooltip piece, I'd be open to that. Yet, I can't figure out how to do that.

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

Answer 1

In order to get the tooltips to work in the first place, you have to initialize them in your code. Ignoring AngularJS for a second, this is how you would get the tooltips to work 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 app so long as it's not content rendered by Angular (eg: ng-repeat). In that case, you need to write a directive to handle this. Here's 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 on the element you want the tooltip to appear on:

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

Hope that helps!

Answer 2

The best solution I've been able to come up with is to include an "onmouseenter" attribute on your element like this:

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