Skip to main content

Tooltip

A Tooltip is a message box that provides a concise amount of relevant contextual information about an associated UI element. Tooltips are activated by hovering over or focusing on an element.

Rules of Thumb

Appearance and Behavior

Behavior

Tooltips display informative text in a message box when the user has hovered or paused their mouse over an associated UI element for a brief length of time (800 ms by default). They can also be activated by focusing an element using the keyboard or voice activation. They should remain visible if the user briefly moves the mouse off and back on to the target. When the user exits the element area, moves the cursor off the element by scrolling, or clicks on another UI element, the Tooltip is hidden.

Appearance

Tooltips have consistent text styling and do not include icons, rich text, images, links, or actions. If those options are desired, consider using the Pop Up component.

Examples
Do: Tooltips can be used to clarify iconography with actions.
Do: Tooltips can be used to clarify iconography with actions.
Don’t: Use tooltips to restate visible text.
Don’t: Use tooltips to restate visible text.
Do: Keep the position of the tooltip visible.
Do: Keep the position of the tooltip visible.
Don’t: Crop tooltips.
Don’t: Crop tooltips.
Do: Tooltips can be used to show shortcuts or hotkeys.
Do: Tooltips can be used to show shortcuts or hotkeys.
Don’t: Use rich text, icons, links, or other actions in Tooltips.
Don’t: Use rich text, icons, links, or other actions in Tooltips.
Do: Use Tooltips to add context to an item.
Do: Use Tooltips to add context to an item.
Don’t: Convey errors or status using Tooltips.
Don’t: Convey errors or status using Tooltips.