If you're building an Angular app, you *can* use jQuery, but there is a lot of 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 the jQuery plugins with native angular by using [**UI Bootstrap**][UI Bootstrap]

Include the Boostrap CSS files, 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.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

Make sure you've injected `ui.bootstrap` when you create your module like this:



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

Then you can use angular directives instead of data attributes picked up by jQuery:



<pre><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; 
        <del>title=&quot;Tooltip on left&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;left&quot;</del>
        <b>tooltip=&quot;Tooltip on left&quot; tooltip-placement=&quot;left&quot; &gt;</b>
  Tooltip on left
&lt;/button&gt;
</code></pre>

### [Demo in Plunker][plunker]

------

## Avoiding UI Bootstrap

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

And time spent downloading the modules is only one aspect of performance. 

If you really wanted to only load the modules you needed, you can "Create a Build" and choose tooltips from the [Bootstrap-UI website][UI Bootstrap].  Or you can explore the [source code for tooltips][tooltips src] and pick out what you need.

Here a minified custom build with just the [tooltips and templates (6kb)][custom]



[UI Bootstrap]: http://angular-ui.github.io/bootstrap/

[plunker]: http://plnkr.co/edit/ikSvWpdNDYg30OGdyHzL?p=preview
[tooltips src]: https://github.com/angular-ui/bootstrap/tree/master/src/tooltip

[jQuery.min.js]: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
[Bootstrap.min.js]: http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
[ui-bootstrap.min.js]: http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js

[custom]: http://embed.plnkr.co/ikSvWpdNDYg30OGdyHzL/ui-bootstrap-custom-tpls-0.10.0.js

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?