Customized tooltips
Since the writing of this sheet, the ARIA specification has been updated from ARIA 1.0 to ARIA 1.1.
This fact sheet is based on the ARIA 1.0 design from WAI-ARIA Authoring Practices 1.0, and the recommendations below may have to be modified once the ARIA 1.1 design patterns are formalized.
For more information on the changes in the ARIA 1.1 update, see WAI-ARIA Authoring Practices 1.1.
Summary
- Principle.
- Core HTML base.
- ARIA roles, states and properties.
- Keyboard interaction.
- Expected behavior.
- Note.
- Examples of components.
Principle
Tooltips are messages that allow the user to obtain additional information about an item. The message is displayed on hover and also when keyboard focus is on the element.
A tooltip is “customized using ARIA” when it is not built using the standard HTML code as found in the specification, which is the title
attribute.
This code is based on the “Tooltip Widget” design pattern found in the WAI-ARIA 1.0 Authoring Practices of the W3C.
Core HTML base
ARIA roles, states and properties
tabindex="0"
must be applied to the element which will cause the tooltip to be displayed, if the tooltip is not reachable by default using the keyboard.role="tooltip"
must be applied to the tooltip container.- The element which triggers the tooltip must be programmatically associated with the tooltip via the
aria-describedby
attribute:- The container of the tooltip must have an
id
attribute set to a unique value. - The element that triggers the tooltip must contain an
aria-describedby
attribute set to the value of theid
attribute of the container for the tooltip.
- The container of the tooltip must have an
Keyboard interaction
Esc
When the tooltip is visible, this key hides the tooltip.
Expected behavior
- The tooltip must be displayed when the triggering element:
- Is hovered over by the mouse.
- Receives keyboard focus.
- The tooltip must be hidden when the triggering element:
- Is not hovered over.
- Does not have keyboard focus.
- Hitting the Esc key hides the tooltip.
- The tooltip must remain visible as long as the mouse is hovering over the triggering element.
- When the tooltip is hidden, it must have
display: none;
and/orvisibility: hidden;
. Or alternatively, it can be removed from the source code.
Note
The major advantage of a custom tooltip over its standard HTML counterpart (title
attribute) is that the custom tooltip is also accessible for keyboard users.
Components
Customized tooltip components are shown here because their level of accessibility is considered good or very good.
However, before using them in your project, it is important to check for compliancy with the specifications presented above. Certain components may require some adjustments..