A short description, that appears when the user holds the mouse pointer over a control or another part of the user interface without clicking.


Tooltips add a level of accessibility and smoothness to the user experience of your product. The information included should be contextual, helpful, and nonessential while providing the ability to convey more information to the user.

When to use

  • To provide additional explanations for content that would otherwise clutter the UI if permanently displayed.
  • To add context to a given screen.
  • When you want to describe icon only buttons.


Anatomy of tooltip
  1. Tooltip label: Contains the context of the tooltip best described in short.
  2. Description: Shows the complete additional information.
  3. Action: Optionally adds a relevant action to the tooltip.

Best Practices

  1. Tooltips must be accessible via hover, focus or click.
  2. Be sure to keep the language in your tooltips clear, to the point, and as short as possible.
  3. Arrows are beneficial to clearly identify to which element the tooltip is associated. When there are several nearby elements, these arrows help avoid confusion.
  4. Most icons have some level of ambiguity, which is why we recommend text labels for all icons.
  5. Position tooltips so they don’t block related content and should be closer to the content it indicates.
  6. Never have more than one active tooltip on the screen at once.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.