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