Building Bootstrap Tooltip Directive in AngularJS

less than 1 minute read

I came across a good way to practise directives from They have a tutorial where they build a bootstrap tab directive with a nice api. Here it is: In similar vein, here I build a bootstrap tooltip directive.


Currently you’ll need this html to get your tooltip ‘bootstrappified’:

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

There are 3 different components related to tooltip here:

  • the title attribute that gives the tooltip text
  • data-placement attribute gives the direction
  • data-toggle attribute is required to trigger the corresponding bootstrap js function.

I’d like to simplify this. I propose this api:

<button ui-title="left: Tooltip on left">Tooltip on left</button>

That’s it. The direction specifier and the tooltip content, both go in one attribute. Here’s the angular directive I built for this api:  

See the Pen Angular BS Tooltip by Prasanna N (@npras) on CodePen.