Tooltip
Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Slots
No slots found for this component, run `yarn gen:docs` to generate component meta first.
Best practices
Tooltips should:
- Provide useful, additional information or clarification.
- Succinctly describe or expand on the element they point to.
- Be provided for icon-only buttons or a button with an associated keyboard shortcut.
- Not be used to communicate critical information, including errors in forms or other interaction feedback.
- Not contain any links or buttons.
- Be used sparingly. If you’re building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
Content guidelines
Basic tooltips
Tooltips should:
- Be written in sentence case
- Be concise and scannable
- Not be used to communicate error messages or important account information
Related components
- To make helpful content more visible to merchants, use the help text portions of form components such as text fields, footer help, or an inline link to help