A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more.

Note to mobile developers: Please note that while tooltips may work correctly on mobile devices (including tablets), we have made the decision to not officially support such a use-case because it does not make sense from a UX perspective.

There are three versions of the tooltip: uib-tooltip, uib-tooltip-template, and uib-tooltip-html:

• uib-tooltip - Takes text only and will escape any HTML provided.
• uib-tooltip-html $ - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the uib-tooltip-template attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!
• uib-tooltip-template $ - Takes text that specifies the location of a template to use for the tooltip. Note that this needs to be wrapped in a tag.

All these settings are available for the three types of tooltips.

• tooltip-animation $ C (Default: true, Config: animation) - Should it fade in and out?

• tooltip-append-to-body $ (Default: false) - Should the tooltip be appended to '$body' instead of the parent element?

• tooltip-class - Custom class to be applied to the tooltip.

• tooltip-enable $ (Default: true) - Is it enabled? It will enable or disable the configured tooltip-trigger.

• tooltip-is-open (Default: false) - Whether to show the tooltip.

• tooltip-placement C (Default: top, Config: placement) - Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The tooltip will attempt to position where it fits in the closest scrollable ancestor. Accepts:

  • top - tooltip on top, horizontally centered on host element.
  • top-left - tooltip on top, left edge aligned with host element left edge.
  • top-right - tooltip on top, right edge aligned with host element right edge.
  • bottom - tooltip on bottom, horizontally centered on host element.
  • bottom-left - tooltip on bottom, left edge aligned with host element left edge.
  • bottom-right - tooltip on bottom, right edge aligned with host element right edge.
  • left - tooltip on left, vertically centered on host element.
  • left-top - tooltip on left, top edge aligned with host element top edge.
  • left-bottom - tooltip on left, bottom edge aligned with host element bottom edge.
  • right - tooltip on right, vertically centered on host element.
  • right-top - tooltip on right, top edge aligned with host element top edge.
  • right-bottom - tooltip on right, bottom edge aligned with host element bottom edge.

• tooltip-popup-close-delay C (Default: 0, Config: popupCloseDelay) - For how long should the tooltip remain open after the close trigger event?

• tooltip-popup-delay C (Default: 0, Config: popupDelay) - Popup delay in milliseconds until it opens.

• tooltip-trigger (Default: mouseenter) - What should trigger a show of the tooltip? Supports a space separated list of event names (see below).

Note: To configure the tooltips, you need to do it on $uibTooltipProvider (also see below).

The following show triggers are supported out of the box, along with their provided hide triggers:

• mouseenter: mouseleave
• click: click
• outsideClick: outsideClick
• focus: blur
• none

The outsideClick trigger will cause the tooltip to toggle on click, and hide when anything else is clicked.

For any non-supported value, the trigger will be used to both show and hide the tooltip. Using the 'none' trigger will disable the internal trigger(s), one can then use the tooltip-is-open attribute exclusively to show and hide the tooltip.

Through the $uibTooltipProvider, you can change the way tooltips and popovers behave by default; the attributes above always take precedence. The following methods are available:

• setTriggers(obj) (Example: { 'openTrigger': 'closeTrigger' }) - Extends the default trigger mappings mentioned above with mappings of your own.

• options(obj) - Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the C badge.

For Safari 7+ support, if you want to use the focus tooltip-trigger, you need to use an anchor tag with a tab index. For example:

<a tabindex="0" uib-tooltip="Test" tooltip-trigger="focus" class="btn btn-default">
  Click Me
</a>