Overview
Tooltip
A short description, that appears when the user holds the mouse pointer over a control or another part of the user interface without clicking.
Overview
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
- Tooltip label: Contains the context of the tooltip best described in short.
- Description:Â Shows the complete additional information.
- Action: Optionally adds a relevant action to the tooltip.
Best Practices
- Tooltips must be accessible via hover, focus or click.
- Be sure to keep the language in your tooltips clear, to the point, and as short as possible.
- Arrows are beneficial to clearly identify to which element the tooltip is associated. When there are several nearby elements, these arrows help avoid confusion.
- Most icons have some level of ambiguity, which is why we recommend text labels for all icons.
- Position tooltips so they don’t block related content and should be closer to the content it indicates.
- 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.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more