Tooltip

This layer component provide supporting information when triggered by hover or focus events. Information should be helpful and concise

General

Do not rely on tooltips for essential information

Consider alternate patterns for tooltips as they are difficult to use on touch devices

Ensure sufficient colour contrast for tooltip text

Make tooltips keyboard accessible

Provide alternative ways to access tooltip content for users who cannot see or interact with tooltips

Keep tooltip content concise and easy to understand

Place tooltips close to icon buttons and the context they relate to

Web

Semantic markup

Use role="tooltip" on the tooltip element

Associate the tooltip with the trigger button using aria-describedby

Ensure the trigger is a proper <button> element with aria-label or visible text

Key accessibility attributes:

Trigger button: Use aria-label to describe the button purpose (e.g., "More information", "Help")

Trigger button: Use aria-describedby to reference the tooltip ID

Tooltip: Use role="tooltip" to identify the element

Tooltip: Use id that matches the aria-describedby value

Icon: Add aria-hidden="true" to decorative icons

Keyboard interaction

Tab — Move focus to the tooltip trigger button

Enter or Space — Activate the trigger button (for tap-based tooltips)

Escape — Dismiss the tooltip

Focus — Show the tooltip when the button receives focus

Blur — Hide the tooltip when focus moves away

Important keyboard considerations:

Tooltips must appear on keyboard focus, not just on hover

Tooltips must be dismissible with the Escape key

Moving the focus away from the trigger should hide the tooltip

Users should not need to interact with the tooltip content itself (it is read-only)

When the trigger button receives focus, screen readers announce the button label followed by the tooltip content

Example announcement: "More information, button. This feature allows you to save your preferences for future visits."

The aria-describedby association ensures the tooltip content is announced automatically

React Native

Provide accessibilityLabel on the trigger button describing its purpose

Use accessibilityHint to provide the tooltip content

Ensure the trigger button is keyboard and screen reader accessible

Consider alternative patterns for mobile, as tooltips can be difficult to use on touch devices

Mobile considerations:

On touch devices, tooltips are more difficult to use than on desktops

Consider alternative patterns like always-visible helper text or expandable sections

If using tooltips on touch devices, ensure they can be dismissed by tapping outside the tooltip