A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more.
There are three versions of the tooltip: uib-tooltip
, uib-tooltip-template
, and uib-tooltip-html-unsafe
:
uib-tooltip
takes text only and will escape any HTML provided.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.uib-tooltip-html
takes whatever HTML is provided and displays it in a tooltip; The user is responsible for ensuring the content is safe to put into the DOM!uib-tooltip-html-unsafe
-- deprecated in favour of tooltip-html
The tooltip directives provide several optional attributes to control how they will display:
tooltip-placement
: Where to place it? Defaults to "top", but also accepts "bottom", "left", "right".tooltip-animation
: Should it fade in and out? Defaults to "true".tooltip-popup-delay
: For how long should the user have to have the mouse over the element before the tooltip shows (in milliseconds)? Defaults to 0.tooltip-close-popup-delay
: For how long should the tooltip remain open after the close trigger event? Defaults to 0.tooltip-trigger
: What should trigger a show of the tooltip? Supports a space separated list of event names. Note: this attribute is no longer observable. See tooltip-enable
.tooltip-enable
: Is it enabled? It will enable or disable the configured tooltip-trigger
.tooltip-append-to-body
: Should the tooltip be appended to $body
instead of the parent element?tooltip-class
: Custom class to be applied to the tooltip.tooltip-is-open
(Default: false): Whether to show the tooltip.The tooltip directives require the $position
service.
Triggers
The following show triggers are supported out of the box, along with their provided hide triggers:
mouseenter
: mouseleave
click
: click
focus
: blur
none
: ``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.
$uibTooltipProvider
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)
: Extends the default trigger mappings mentioned above with mappings of your own. E.g. { 'openTrigger': 'closeTrigger' }
.
options(obj)
: Provide a set of defaults for certain tooltip and popover attributes. Currently supports 'placement', 'animation', 'popupDelay', and appendToBody
. Here are the defaults:
Known issues
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>