🚧 This website is work in progress 👷
Components
Overlay
Published

Tooltip

Tooltip component provides additional information when a user hovers over, focuses on, or taps an element.

Examples

Figma file

Anatomy

Figma file

When to use

  • To offer brief, supplementary information or clarification about an element without cluttering the UI.
  • When you need to explain icons, abbreviations, or truncated text.
  • To provide helpful hints or tool descriptions in form fields, buttons, or interactive elements.
  • When the additional information is non-essential and the interface should remain clean and uncluttered.

When not to use

  • For critical information that the user must see to complete a task; this should be visible by default.
  • When the information is lengthy; consider using a modal or a popover instead.
  • If the content within the tooltip needs to be interacted with, such as links or buttons.
  • For mobile users as tooltips can be difficult to trigger and view on touch devices.

Alternative components

  • MODAL: Use for essential, detailed information or when interaction within the content is required.
  • POPOVER: Ideal for displaying additional content that requires interaction or is too lengthy for a tooltip.
  • HELP TEXT: Use for static, always-visible instructions or explanations near the related element

Accessibility

  • Ensure the tooltip is accessible via keyboard by using focus events to trigger the tooltip.
  • Provide ARIA attributes like aria-describedby to link the tooltip to the element it describes.
  • Ensure the tooltip remains visible while the user navigates through its content using a keyboard.
  • Provide a way to dismiss the tooltip using a keyboard (e.g., pressing the Esc key).
  • Make sure tooltips are dismissible on both hover out and focus out events.
  • Use sufficient contrast and readable font sizes to ensure the tooltip content is easily legible.

Reference

On this page

References