Tooltips are floating labels that briefly explain the function of an interface element. They appear on hover, focus, tap, or click.
Figma
The Figma reference for Tooltip will appear here once the design link is added.
Storybook
Interactive examples for Tooltip will render here once the Storybook link is wired in.
Best practices
- Provide useful, additional information or clarification.
- Succinctly describe or expand on the element they point to.
- Provide one for icon-only buttons or a control with an associated keyboard shortcut.
- Don’t use tooltips to communicate critical information such as form errors.
- Don’t put links or buttons inside a tooltip.
- Use them sparingly — needing many tooltips is a sign the design or language should be clarified.
Do’s and don’ts
Do
Write concise, sentence-case helper text: “Buyer’s premium is added to the final hammer price.”
Don’t
Put urgent account or error information in a tooltip: “Your deposit must be paid immediately.”