Tooltip
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.
Component Variants
Design Principles
- 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.