Read This First
No ARIA is better than Bad ARIA. Before using any ARIA, read this to understand why.
Tooltip Pattern
About This Pattern
NOTE: This design pattern is work in progress; it does not yet have task force consensus. Progress and discussions are captured in issue 128.
A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out.
Tooltip widgets do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.
Example
Work to develop a tooltip example is tracked by issue 127.
Keyboard Interaction
Escape: Dismisses the Tooltip.
Note
- Focus stays on the triggering element while the tooltip is displayed.
- If the tooltip is invoked when the trigger element receives focus, then it is dismissed when it no longer has focus (onBlur).
- If the tooltip is invoked when a pointing cursor moves over the trigger element, then it remains open as long as the cursor is over the trigger or the tooltip.
WAI-ARIA Roles, States, and Properties
- The element that serves as the tooltip container has role tooltip.
- The element that triggers the tooltip references the tooltip element with aria-describedby.