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.

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.

The tooltip component has been based on the following resources:

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.