Tooltip

A tooltip provides additional information on hover or focus.

Base Components

Overview

A tooltip is a small, informational pop-up that appears when a user hovers over or focuses on an element, providing additional context or details.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D6-26%26t%3DpA8X0YmO6d7F2SMU-1

When should you use them?

Use tooltips to offer extra information or explanations without cluttering the interface, especially for icons, buttons, or complex features.

How should you use them?

  • Keep tooltip text concise and informative.
  • Ensure tooltips are easily accessible on hover or focus.
  • Position tooltips so they do not obscure other important content.
  • Use subtle animations for showing and hiding tooltips.
  • Ensure tooltips are accessible, with ARIA roles and attributes.
Previous

No previous post
Up next

No next post