Examples

Add small overlays of content on hover, to any element for housing secondary information.

Plugin dependency

Tooltip require the helpers.dimensions module to be loaded.

Live demo clog.info

$scope.tooltip = {{tooltip | json}};

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

Usage

Append a bs-tooltip attribute to any element to enable the directive.

The module exposes a $tooltipservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myTooltip = $tooltip(element, {title: 'My Title'});
        
      

Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to data-, as in data-animation="".

For directives, you can naturally inherit the contextual $scope or leverage a custom one with an AngularJS expression to evaluate as an object directly on the bs-tooltip attribute

This module supports exotic placement options!

You can position your popover in corners (such as bottom-left) or any other combination two.

Exotic placement options are not part of the Bootstrap's core, to use them you must use bootstrap-additions.css from the BootstrapAdditions project. This project being not yet fully released, meanwhile, you can use the development snapshot compiled for theses docs.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'right' how to position the tooltip - top | bottom | left | right, or any combination like bottom-left.
trigger string 'click' how tooltip is triggered - click | hover | focus | manual
title string '' default title value if titleattribute isn't present
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.

template path false

If provided, overrides the default template, can be either a remote URL or a cached template id.

It should be a div.tooltip element following Twitter Bootstrap styles conventions (like this).

contentTemplate path false

If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.

prefixEvent string 'modal'

If provided, prefixes the events '.hide' '.hide.after' '.show' and '.show.after' with the passed in value. With the default value these events are 'modal.hide' 'modal.hide.after' 'modal.show' and 'modal.show.after'

Default options

You can override global defaults for the plugin with $tooltipProvider.defaults

        
          angular.module('myApp')
          .config(function($tooltipProvider) {
            angular.extend($tooltipProvider.defaults, {
              animation: 'am-flip-x',
              trigger: 'hover'
            });
          })
        
      

Scope methods

Methods available inside the directive scope to toggle visibility.

$show()

Reveals the tooltip.

$hide()

Hides the tooltip.

$toggle()

Toggles the tooltip.