figma
storybook
react
i18nTooltip
Tooltips provide helpful, additional content for their paired elements on hover. They are contextual and specific to the element and don't provide the big picture.
Zoning
Style
Content
Tooltips with obvious or redundant text are not beneficial to users. If you can’t think of particularly helpful content, don’t offer a tooltip. Otherwise, you’ll just add information pollution to your UI and waste the time of users.
- Use tooltips consistently throughout your site.
Try to make the text as short as possible and include the most critical or meaningful info to make reading easier.
- If the tooltip has more than one sentence, use a period at the end.
- Don't use tooltips for simple actions users perform regularly.
- Avoid tooltips which are complete duplicates of what is stated clearly in the UI.
Don't use tooltips for information that is necessary to task completion (e.g., field or password requirements). Such info essential to a frictionless user experience should always be present on the screen.
If the tooltip is one phrase, don't use a period at the end even if it's a complete sentence in order not to overload the interface.
Usage
| Name | Description | Default | Control |
|---|---|---|---|
| title | Tooltip content giving context to the disclosure | - |
For more info about Tooltip props, refer to documentation of Reakit.
Accessibility
- Press TABS to focus element and tooltip will be visible