Tooltip
A popup text pattern that provides additional information about an element
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemstooltip role on the popup
The tooltip element must have role="tooltip".
Connect to trigger via aria-describedby
The triggering element must reference the tooltip id via aria-describedby.
Dismiss with Escape
Pressing Escape must dismiss the tooltip.
Show tooltip on focus as well
The tooltip must appear on both hover and keyboard focus, not hover alone.
No focusable content inside
Tooltip content must not contain interactive elements (links, buttons), as they would be unreachable.
Keep tooltip visible while hovering it
The tooltip must remain visible when the user moves the mouse over it.
Show after a short delay
Introduce a short delay (e.g., 300ms) before showing the tooltip to reduce distraction.
Do not put interactive content in tooltips
Interactive content (links, buttons) inside a tooltip cannot be reached with keyboard or screen readers.
Do not rely on title attribute alone
The HTML title attribute is not reliably announced by screen readers. Use role="tooltip" with aria-describedby.
Additional checks
Set enterDelay
Set enterDelay to at least 300ms so the tooltip does not appear on accidental hover.
Code sample
Implementation notes
- –MUI Tooltip automatically handles role="tooltip" and aria-describedby.
- –When using custom children, implement forwardRef.