Tooltip
Tooltip
Easy to use for everyone
Tooltips can be used by people using any input method. They display by default on hover or on focus.
To ensure the tooltip content can be understood, the tooltip remains displayed if the cursor is moved over the tooltip area, even if it leaves the associated element’s area.
The text displayed within a tooltip is selectable so that it can be copied or focused with a virtual cursor.
For Assistive Technology
Tooltips usearia-describedby
oraria-labelledby
to link it with the associated element.
Tooltips have an internalsilent
property, which appliesaria-hidden
to the tooltip when the tooltip information would have been duplicated, for example when an icon button has atitle
oraria-label
set.
Based on
The tooltip component has been based on the following resources:
-
Tooltips in the time of WCAG 2.1 , Sarah M Higley, accessed August 2022. -
Tooltip guidelines , Nielsen Normal Group, accessed August 2022.
Testing
We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.