- Use a tooltip when a form label or product jargon needs explanation or definition.
- Use a tooltip when a graphic/icon needs additional explanation or definition.
- Any interaction away from the tooltip causes it to close (e.g. lose focus, click on something away from visible tooltip region).
- Interactive elements are not allowed inside tooltips. If interactive elements are needed, consider using a popout, a modal, etc.
- Line breaks in text are allowed, but do not use it when a long list or copy would require scrolling.
- The max width of a tooltip is 384px, which is our layout-400 token. Whenever possible, align the width of the tooltip to one of our layout design tokens.
Do's and Don'ts
Keep copy to a minimum.
Use whenever the user would reasonably need more information.
Don’t trigger tooltips on any interaction other than hover.
Don’t add any UI to tooltips.