Developer mode
Opens components on the React tab by default.
Your bookmarks

Tooltip

Shows additional context on tap or hover.

Some people find it’s the details of a trip that make it worth taking. Sometimes those details distract people from making decisions about their trip. You always have a limited amount of space to present information before it becomes overwhelming.

To include context for those who want it but keep it hidden from those who don’t, use a tooltip to show users there’s something more to learn. Tooltips can also add detailed explanations for icons without a visible label. Get users’ attention with relevant text or icons, but keep the fine print out of the way of the main flow.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Content structure

Close button: closes tooltip on mobile; content: adds static info for context or additional help; tooltip indicator: indicates when text is wrapped in a tooltip; arrow: points to child on desktop and optionally can be set with preferred position and alignment.