Skip to content
Design System

Tooltips

A tooltip is a short descriptive messages that provides additional information about a UI element or feature. It is triggered when the element it relates to is hovered over or otherwise focused.

Show developer docs

Design

Section titled “ Design”
Hover over a button to view the tooltip.
On the leftTooltip leftOn the topTooltip topOn the bottomTooltip bottomOn the rightTooltip right

Best practices

Section titled “ Best practices”

Use tooltips for very short text that adds context to UI elements. Use sparingly.

  • Displaying a tooltip requires a user to hover over (or focus on) the related element.
  • Dismissing a tooltip requires a user to shift focus away from the element.
  • Be mindful of placement - a tooltip should not obscure critical elements on the page.

Accessibility

Section titled “ Accessibility”
  • Tooltips should be operable using the keyboard alone.
  • Tooltips should be announced by screen readers.

For more information, see our accessibility guidelines.

Design resources

Section titled “ Design resources”
View component in Figma