Tooltip

A tooltip is a floating label that provides explanations for user interface elements or features but cannot be interacted with.

React documented

Flutter documented

Design

Is the design finished and component available in Figma library?

Up to date

React

Is new design vision part implemented using new tokens?

Up to date

Flutter

Is new design vision part implemented using new tokens?

Up to date

Introduction

In SaaS product design, tooltips offer descriptive assistance to users when the mouse hovers over a item. For instance, briefly moving the mouse pointer over a icon can trigger a small popup label with additional details. When the mouse moves away, the tooltip vanishes, ensuring that the main interface remains uncluttered. However, it's important to use tooltips judiciously, especially when they are not needed frequently.