Last Updated on Sep 29, 2022
Tooltips are user-triggered messages that provide additional information about a page element or feature. They are generally a small, floating content block triggered via hovering over or focusing on an element.
- 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.
Table of ContentsComponent VariantsDesign PrinciplesDo's and Don'ts