Tooltip

Docs draft

useNaming an icon-only control or adding a short clarification on hover/focus.

avoidContent the user needs to complete a task. If it matters, it does not hide behind a hover. visible-text visible text.

avoidInteractive content — buttons, links, forms. Tooltips are read-only and dismiss on leave. popover Planned.

placement · top / bottom — Arrow booleans in Figma (Top Arrow / Bottom Arrow); a placement prop in code.

align · start / center / end — Where the arrow sits along the edge. The old Alignment axis.

line · single / multi-line — Figma-only axis: multi-line caps the box at 240 and wraps. Code wraps automatically at the same cap.

mustReveal on keyboard focus exactly as on hover. — Hover-only tooltips are invisible to keyboard users; the component wires focus-within by default.

must-notNo interactive content inside a tooltip. — It cannot be reached before the tooltip dismisses; that pattern is a popover.

shouldOne short sentence, no heading, no punctuation ceremony. — Past 240px wide and two lines, it is documentation, not a tooltip.

Prop	Type	Description
`content`	`ReactNode`	The helper text.
`placement`	`enum`	Which side of the trigger the tip renders on.
`align`	`enum`	Alignment of the tip along the trigger edge.
`children`	`ReactNode`	The trigger; receives aria-describedby.

surface	color.bg.inverse
text	color.text.on-inverse
typography	type.body-sm
radius	radius.md
padding	space.12 x space.8 — ratified; the old set used 12 on single-line and 8 on multi-line
max-width	240px
arrow	14 x 7 triangle in the surface color

Tab — Focusing the trigger reveals the tooltip; leaving dismisses it.

Escape — Should dismiss while focused — arrives with the JS layer before stable.

color.text.on-inverse on color.bg.inverse — Contracted at ≥ 4.5:1 by the build gate.

role=tooltip linked via aria-describedby. The old set was dark-only #414141 on black at 1.5:1 surface separation; the inverse pair fixes both themes.