# Tooltips tooltip.js

`mgcrea.ngStrap.tooltip`

## 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

Title

    $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.

Check me to enable my tooltip

## Usage

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

#### The module exposes a `$tooltip`service

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 | 'top' | how to position the tooltip - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
trigger | string | 'hover focus' | how tooltip is triggered - click | hover | focus | manual
title | string | '' | default title value if `title`attribute 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.
target | string | DOMElement | false | false | Position the tooltip relative to a specific target element.
template | string | '' | Provide an html template as a string (when templateUrl is falsy).
templateUrl | path | 'tooltip/tooltip.tpl.html' | 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 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 | 'tooltip' | If provided, prefixes the events '.hide.before' '.hide' '.show.before' and '.show' with the passed in value. With the default value these events are 'tooltip.hide.before' 'tooltip.hide' 'tooltip.show.before' and 'tooltip.show'
id | string | '' | The tooltip instance id for usage in event handlers.
viewport | string | object | { selector: 'body', padding: 0 } | Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

#### 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'
                });
              })

### Helper attributes

Helper attributes can be used together with the directive via data-attributes to support specific functionality. Helper attributes support data binding. To use helper attributes, append the helper attribute name to `data-`, as in `data-bs-show="true"`.

Name | type | default | description
--- | --- | --- | ---
bsShow | boolean | string | false | shows or hides the tooltip. Supports boolean values or "true"/"false" string values. You can also specify "tooltip" to show just the tooltip when using several angular-strap directives on the same element.
bsEnabled | boolean | string | true | enables or disables the tooltip trigger. When the tooltip is disabled, calling show() will have no effect. Supports boolean values or "true" "false" "1" "0" string values.

### Scope methods

Methods available inside the directive scope to toggle visibility.

#### $show()

Reveals the tooltip.

#### $hide()

Hides the tooltip.

#### $toggle()

Toggles the tooltip.

#### $setEnabled(isEnabled)

Enables or disables the tooltip.