Skip to main content

Tooltip

A tooltip is a contextual message that appears when users interact with an element, providing additional information or guidance.

Overview

The purpose of tooltips is to enhance the user experience by providing context and guidance, particularly when elements may not have enough space to display all the information or when certain functionalities need clarification.

Tooltips are displayed as a small box near the element they are associated with. They are triggered by user actions like hovering over an element with a mouse cursor or tapping on it in touch-based interfaces.

A tooltip that contains multiple lines of text and a close icon to dismiss.

Resources

Figma Component
 Available
Figma Documentation
 Available
Web Components
 Planned
Vue [Fozzie]
 N/A
React [Snacks]
 Available
iOS JustUI [UI Kit]
 N/A
iOS PIE [SwiftUI]
 N/A
Android [XML views]
 TBC
Android [Jetpack compose]
 TBC