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.
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. Both strings are the file's own.
Four positions on one axis. The bubble clears the anchor by 8 on the side it points from and centres on the other. Nothing flips at a screen edge, so pick the side with room.
Top measures 164 wide, exactly what the two strings need. Bottom, Left and Right measure 173 for the same content, nine wider than it takes. Drawn as the file has it.
Two sizes. The axis moves the anchor only: the bubble is the same object at both. Size sets the tap target, not the hint.
A 16 anchor is under the 44 minimum on its own, so at sm give the icon a larger tap target than the artwork, or hang the tooltip off a control that already has one.
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 colour, the weaker of the two.
The wrapper hugs its content, so dropping a line takes 16 off the height and leaves the width alone. The headline is the only line with weight: white on the fill, while the supporting line reads a muted grey.
Three axes on the published component, sixteen variants. The bubble is a private block with two booleans of its own.
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.
Four colours, and two of them invert with the theme.
The supporting line reads text/disabled-400, a disabled token doing the work of a supporting one, so a live sentence looks switched off. Drawn as the file has it. The pointer's two source rectangles are bound to fg/strong-950 while the boolean result and the bubble read bg/strong-950. Both resolve to the same value in both modes, so that one is naming, not appearance. Geometry runs on radius/lg 12, spacing/3 12, spacing/2 8 and icon/stroke 2. No effect on the bubble, so a layer floating over content has only its own fill to separate it.
Define one term the screen cannot. A label and a line, and the answer is on the screen the moment the user asks.
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: on a phone a tooltip is a deliberate tap, not something that happens in passing. 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.
