Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Tooltip guidelines #1356

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
+8 −0
Open

[docs] Tooltip guidelines #1356

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
49aae40
[docs] Tooltip guidelines
atomiks Jan 27, 2025
94252aa
Touch
atomiks Jan 27, 2025
0ca9b0f
Merge branch 'master' into docs/tooltip-guidelines
atomiks Feb 3, 2025
e4a7f90
Update
atomiks Feb 3, 2025
1f8c54e
Improve description
atomiks Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/src/app/(public)/(content)/react/components/tooltip/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@

<Demo path="./demos/hero" />

## Accessibility guidelines

To ensure that tooltips are accessible and helpful, follow these guidelines:

- **The trigger must be labeled**: Make sure the trigger element has an accessible name — this can be the button's text, an `aria-label`, or an `aria-labelledby` attribute. The label is the primary way for screen readers to communicate the trigger/tool's purpose. The accessible name should closely match the tooltip's content to convey the same information.
- **Avoid for critical information**: Tooltips are a great way to visually label an element for sighted mouse users while conserving layout space, but they should be used supplementarily, as they do not show for touch input (i.e. mobile devices). Opt for a `Popover` for critical information instead.
- **Avoid for "infotips"**: If your tooltip is attached to an "info icon" button whose only purpose is to show the tooltip, opt for [Popover](/react/components/popover) and add the `openOnHover` prop instead. Tooltips are meant to provide additional information about an element that performs a separate action from opening the popup.

## API reference

Import the component and assemble its parts:
Expand Down