Tooltip

Provides brief, contextual information when users hover over or focus on an element, helping to clarify or enhance understanding without cluttering the interface.​

When to use

  • Use tooltips to provide supplementary information or context that helps users understand an element or action without cluttering the interface.
  • Ideal for explaining icons, terms, or features that may not be immediately clear to all users.
  • Use when the information is optional and not critical for completing a task, allowing users to hover or focus to get more details.

When not to use

  • Avoid using tooltips for crucial information that users must have to complete a task or understand the content.
  • Do not rely on tooltips as the only method of conveying key instructions or data, as they may not be accessible to all users (e.g., mobile users, screen reader users).
  • Refrain from using tooltips in crowded or mobile interfaces where there may not be enough space for proper interaction or display.

Accessibility considerations

  • Ensure that the tooltip can be triggered by both mouse hover and keyboard focus for accessibility.
  • Do not place critical information inside tooltips, as some users may miss it or be unable to access it.
  • Make sure the tooltip is dismissible by all users, and ensure its appearance doesn’t interfere with other interactive elements on the page.
  • Ensure that tooltips are compatible with assistive technologies like screen readers, so the content is accessible to users who rely on them.

Positioning

The Tooltip can be positioned relative to the source element in multiple ways, depending on the design needs. It can be placed above (top), to the right, below (bottom), or to the left of the source. Additionally, it can appear before or after the source.