Updated
Tooltip
Tooltip explains one control in a few words, anchored to the thing it describes. There is no hover on a phone, so it opens on tap or focus.
Updated
Preview
A short hint anchored to the control it explains. No hover on a phone: it opens on tap, closes on the next. Keep it to a label and a line. Anything longer belongs in the screen, not over it.
The component's own box is the 24 icon. The bubble sits outside that frame in the file and is absolute here, so opening one never moves anything around it.
The bubble hugs its two strings, which are the file's sample copy: 146 wide and 48 tall.
Open False draws the anchor alone in fg/soft-500, and it is the default in the file. Open True lights the anchor in fg/sub-700 and adds the bubble.
Source: Figma sets Tooltip and _Tooltip, read October 2, 2026.
Where does a Tooltip open?
Top, Bottom, Left or Right: four positions on one axis. The bubble clears the anchor by 8 on the side it points from and centers on the other. Nothing flips at a screen edge, so pick the side with room.
The bubble is the same 146 wide in every position because it hugs the same two strings. The file's blocks measure 146 by 56 at Top and Bottom and 154 by 48 at Left and Right once the 8 deep pointer is counted.
The width follows the text and stays the same as the position changes.
Which sizes does Tooltip come in?
Two, md and sm. The axis moves the anchor only, so the bubble is the same object at both and the size sets the tap target.
A 16 anchor is under the minimum touch target of 44 pt on iOS and 48 dp on Android, which comes from platform/min-touch-target in the Platform collection, and the 24 anchor at md is under it too.
Give the icon a larger tap target than the artwork, or hang the tooltip off a control that already has one.
Content
Two booleans on the bubble, both true by default. Turn the supporting line off for a one word label. Turn the headline off and you get a sentence in the muted color, the weaker of the two.
The wrapper hugs its content, so dropping a line takes 16 off the height and leaves the width to the longer line that remains. The headline is the only line with weight: white on the fill in Semi Bold, while the supporting line reads Regular in a muted gray.
Properties
Three variant axes on the published component. The bubble is a private block with two booleans of its own.
| Property | Type | Default |
|---|---|---|
Open | Variant: True, False | False |
Position | Variant: Top, Left, Right, Bottom | Top |
Size | Variant: md, sm | md |
Headline | Boolean, on _Tooltip | true |
Supporting Text | Boolean, on _Tooltip | true |
| Set | Variants | Size |
|---|---|---|
Tooltip | 16, Open x Position x Size | 24 x 24, or 16 x 16 at sm |
_Tooltip | 4, on Position | 146 x 56 at Top and Bottom, 154 x 48 at Left and Right |
There is no text property anywhere. Both strings are plain text nodes, so real copy is an override on each instance.
The published component measures the anchor only. A tooltip never changes the layout it sits in, and nothing stops it running off a narrow screen.
Tokens
Five colors, and two of them invert with the theme.
| Token | Light | Dark | Applied to |
|---|---|---|---|
bg/strong-950 | #0E0E0F | #FFFFFF | The bubble and its pointer |
text/white-0 | #FFFFFF | #0E0E0F | Headline |
text/disabled-400 | #AEAEB2 | #8E8E93 | Supporting line |
fg/sub-700 | #48484A | #C7C7CC | The anchor, Open True |
fg/soft-500 | #8E8E93 | #AEAEB2 | The anchor, Open False |
The supporting line reads text/disabled-400, the muted color the file gives it. Geometry runs on dimensions/radius/lg 12, dimensions/spacing/3 12, dimensions/spacing/2 8 and dimensions/icon/stroke 2.
The bubble carries no effect style, so a layer floating over content has only its own fill to separate it.
How does Tooltip differ on iOS and Material 3?
iOS has no tooltip set in the file, and a phone has no hover. Material 3 has two, a Plain Tooltip for a label and a Rich Tooltip for a title, text and action, where Appetite UI Tooltip is a headline over one supporting line.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Tooltip | None in the file. | M3 / Plain Tooltip, Type Single line or Multi line, 24 tall at radius 4. M3 / Rich Tooltip, 312 by 136. | Appetite UI draws a 48 tall bubble at radius 12 with a 16 by 8 pointer and four positions, and the anchor is part of the component. |
The set description says to use it sparingly on mobile. The _Tooltip description says the bubble is raised on tap or focus, so draw the focus state too and let a keyboard reader get the hint a touch reader gets.
Guidelines
Do
Define one term the screen cannot. A label and a line, and the answer is on the screen the moment the user asks.
Don't
Do not put an action in it. A tooltip closes on the next tap anywhere, so anything you can press inside one is a target the user loses on the way to it.
Use it where a control cannot say what it means in the space it has: an icon button, a metric, a legal term. Never hide anything the user needs to finish the task, because on a phone a tooltip takes a deliberate tap.
Check the side before you ship. Nothing flips away from a screen edge, so a Left tooltip near the left margin runs off the screen.