AngularJS + Bootstrap tooltip support
Last updated 15 days ago by hash-bang .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @momsfriendlydevco/angular-bs-tooltip 
SYNC missed versions from official npm registry.


AngularJS + Bootstrap tooltip support.



  1. Grab the NPM
npm install --save @momsfriendlydevco/angular-bs-tooltip
  1. Install the required script + CSS somewhere in your build chain or include it in a HTML header:
<script src="/libs/angular-bs-tooltip/dist/angular-bs-tooltip.min.js"/>
  1. Include the router in your main angular.module() call:
var app = angular.module('app', ['angular-bs-tooltip'])
  1. Use somewhere in your template:
<a class="btn btn-primary" tooltip="Hello World!">Top</a>

A demo is also available. To use this follow the instructions in the demo directory.



The following options can be applied to any element to configure tooltips.

Option Type Default Description
tooltip string "" The content to display in the tooltip. This is rendered dynamically so Angular braces can be used. If tooltip-html is true the contents are rendered as HTML
tooltip-position string top Where to position the tooltip. Values are: top, bottom, left, right
tooltip-container string body The element to attach the tooltip to. Values are: body, element
tooltip-trigger string hover When to display the tooltip. Values are: hover, focus, click, manual
tooltip-html boolean false Whether to render the contents as HTML. If false, plain text is used
tooltip-show boolean false Force the tooltip to show or hide (this overrides tooltip-trigger if true or false, set to undefined to ignore)
tooltip-tether boolean OR number false Use Tether to dynamically pin the element. Use this (and include Tether in the project) if your underlying element changes position frequently. This setting is the time interval Tether should check for repositions (a value of true = 100). NOTE: If you are just refreshing positions periodically use the $scope.$broadcast('bs.tooltip.reposition') instead


This directive also responds to the following broadcast events from the scope. To use these simply broadcast from the parent scope downwards using $broadcast(). For example $scope.$broadcast('bs.tooltip.reposition') will force all tooltips below the calling controller to reposition themselves.

Event Description
bs.tooltip.reposition Reposition all tooltips to their parent element if they are visible. If tooltip-tether is enabled on any tooltip it will be used for positioning, if not the tooltip is repositioned by Bootstrap

Current Tags

  • 1.3.4                                ...           latest (15 days ago)

12 Versions

  • 1.3.4                                ...           15 days ago
  • 1.3.3                                ...           17 days ago
  • 1.3.2                                ...           9 months ago
  • 1.3.1                                ...           9 months ago
  • 1.3.0                                ...           2 years ago
  • 1.2.6                                ...           3 years ago
  • 1.2.5                                ...           3 years ago
  • 1.2.4                                ...           3 years ago
  • 1.2.3                                ...           4 years ago
  • 1.2.2                                ...           4 years ago
  • 1.2.0                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
Today 0
This Week 0
This Month 34
Last Day 0
Last Week 1
Last Month 1
Dependencies (4)
Dev Dependencies (17)

Copyright 2014 - 2017 © taobao.org |