tooltips | Angularjs directive for easier tooltips

angular-tooltips directive


Stars : 10

Forks : 10

Created by 720kb

bower install angular-tooltips

Demo Download GitHub


Angular Tooltips

Angular Tooltips is an angularjs directive that generates a tooltip on your element.

The angular tooltips is developed by 720kb.


AngularJS v1.2+


Angular tooltips

Browser support

Chrome ok

Firefox ok

Safari ok

Opera ok

IE mmm


To use the directive, include the angular tooltips’s javascript and css files in your web page:

  <link href="src/css/angular-tooltips.css" rel="stylesheet" type="text/css" />
<body ng-app="app">
  <script src="src/js/angular-tooltips.js"></script>


Bower installation

$ bower install angular-tooltips --save

then load the js files in your html

Add module dependency

Add the 720kb.tooltips module dependency

angular.module('app', [

Call the directive wherever you want in your html page

<a href="#" tooltips title="tooltip">Tooltip me</a>


Angular tooltips allows you to use some options via attribute data

Tooltip position

You can set your tooltip to show on left or right or top or bottom position using the tooltip-side="" attribute

<a href="#" tooltips title="tip" tooltip-side="top">Tooltip me</a>
<a href="#" tooltips title="tip" tooltip-side="bottom">Tooltip me</a>
<a href="#" tooltips title="tip" tooltip-side="left">Tooltip me</a>
<a href="#" tooltips title="tip" tooltip-side="right">Tooltip me</a>

Tooltip content

You can set your tooltip content (text/html doesn’t matter) using the tooltip-content="" attribute

<a href="#" tooltips title="Tooltip" tooltip-content="<i>Woa!</i>">Tooltip me</a>

Tooltip size

You can set your tooltip size (small || medium || large) using the tooltip-size="" attribute

<a href="#" tooltips title="tip" tooltip-size="small">Tooltip me</a>
<a href="#" tooltips title="tip"tooltip-size="medium">Tooltip me</a>
<a href="#" tooltips title="tip" tooltip-size="large">Tooltip me</a>


Javascript plugin