Tooltip

A Tooltip is a small, interactive element in a design system that provides additional information when a user hovers over, focuses on, or taps an interface element. It helps clarify the function or details of a UI component without cluttering the interface, enhancing usability and user experience. Tooltips are typically used to give context, explain features, or offer guidance in a concise manner.

Component Status

Figma

Up to date

Status

Stable

HTML

Up to date

React

Up to date

Twig

Up to date

Design Usage

  • Use the Tooltip component keep extra information off the screen but accessible
  • For large and/or structured content use Modal Component
  • The tooltip is usually a hover or focus-activated. Hovering over text is a desktop (mouse) pattern that doesn't work on mobile devices

 

 

© 2025 Spirit. Page last updated on Nov 27, 2024, 17:27