Skip to content

Find what you need, instantly

Search components, ARIA roles & attributes, and WCAG criteria.

All roles

tooltip

Widget role

A small popup showing brief descriptive text for the element it's attached to, appearing on hover or focus. It supplements rather than replaces an accessible name and shouldn't contain interactive content. Associate it with its trigger via aria-describedby, and make it dismissible with Escape.

Used on
A popup describing the element it is attached to.
Required properties
  • aria-describedbyon the trigger, pointing to the tooltip
Accessible name
From the tooltip's child text content.
Used by components
Example
role="tooltip"
<button aria-describedby="tip">?</button>
<div role="tooltip" id="tip">Reset to defaults</div>
See a live, tested example on the Tooltip page