Using Bootstrap Tooltip with AngularJS

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!

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>

Simple Answer - using UI Bootstrap (ui.bootstrap.tooltip)

There seem to be a bunch of very complex answers to this question. Here's what worked for me.

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

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

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