The ui-tooltip element creates an accessible tooltip for non-interactive content.
It can contain markup, but should not contain any interactive elements, as tooltips cannot be focused by
assistive technologies. If you need an overlay with interactive content (e.g. links or buttons) consider using
a ui-popup element instead and refer to the Info Popup example.
<button aria-describedby="tooltip">Redeem</button> <ui-tooltip id="tooltip"> Redeem your earned interest. </ui-tooltip>
To connect a tooltip to another element, the ui-tooltip element should have an explicit
id attribute set. The element owning the tooltip can then refer to the tooltip by using this
id as value for the aria-describedby or aria-labelledby attribute. The
ui-tooltip element will automatically find all elements in the document with these attributes and
manage the TooltipTriggerBehavior creation for the matching elements.
Tooltips are positioned by the PositionBehavior and automatically adjust their alignment and position if there is not enough available space to display in the configured area.
This tooltip won't fit centered over its trigger. The PositionBehavior will align it to the
left of the tooltip trigger.
This tooltip will fit centered over its trigger. The PositionBehavior will leave it as is.
The position is updated on smartly when the screen is resized, when the viewport is scrolled, and even when the content of the tooltip changes. Keyboard-focus any of the tooltip triggers and scroll this page to see the tooltip position being updated in real-time. If you scroll down far enough, you can even observe the tooltip flipping from a top-alignment to a bottom-alignment in order to not leave the visible screen area.
ui-tooltip elements can be shared between multiple trigger elements by simply referring to the
same id from multiple trigger elements. The ui-tooltip will automatically set the
active origin for positioning the tooltip at the appropriate trigger element.
All of the following elements use the same ui-tooltip instance.
A tooltip can be attached to pretty much any element, for example:
This linkYou can attach tooltips to icons as well:
Notice how the icon becomes keyboard-focusable when a tooltip is attached to it.
You could even attach a tooltip to an input:
The TooltipTriggerBehavior will usually set the tabindex attribute of the tooltip
trigger element to 0 to enable keyboard focusability of the trigger and improve accessibility.
In some cases however, this can lead to issues, when the trigger element is not supposed to be interactive
and/or would disturb the focus order of the document.
In these cases a tooltip trigger can be made non-focuable by explicitly setting its tabindex
to -1.
In this example the trigger element has multiple overlays attached: A popup and a tooltip. Both overlays are triggered under different conditions and the popup overlay manages the focus of its trigger element, essentially blurring the trigger element once the popup overlay is shown.
The tooltip shows with a scheduled delay, and it ensures the trigger still meets the condition for showing the tooltip (it hasn't lost focused / it is still hovered by the mouse pointer). If those conditions are not met, the tooltip should not show, e.g. when the popup opens and moves the focus to its overlay, the trigger element is no longer focused and the tooltip should not show.
Redeem your interest.