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

Because of the tooltip function, you have to tell angularJS that you are using jQuery.

This is your directive:

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

and this is how to use the directive :

<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>

Answer 2

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's no need for jquery, its a late anwser but I figured since is the top voted one, I should point out this.

Answer 3

AngularStrap doesn't work in IE8 with angularjs version 1.2.9 so not use this if your application needs to support IE8

Answer 4

Please remember one thing if you want to use bootstrap tooltip in angularjs is order of your scripts if you are using jquery-ui as well, it should be:

• jQuery
• jQuery UI
• Bootstap

It is tried and tested

Answer 5

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>

Answer 6

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 to avoid JavaScript code on the top of AngularJS