Tooltip
Hover or focus the trigger. The circle behind the icon is the tooltip: it lifts out from behind the icon, then widens from its centre into the label.
Usage
<Tooltip
content="Helpful hint"
placement="top"
delay={120}
gap={0}
spring="smooth"
>
<button aria-label="Help">?</button>
</Tooltip>How the motion works
The bubble is anchored to the trigger's centre and sized to its box, so at rest it is indistinguishable from the trigger's background — the trigger itself paints none. It sits under the trigger in z, which is what lets the icon stay put while the surface lifts away from behind it. The reveal then runs in two beats on two springs: the rise, then the widening, triggered by the rise crossing 70% rather than by a timer, so the handoff tracks the spring's real settling instead of an assumed duration; the exit runs the sequence backwards. The label is centred out of flow, which is what lets the widening clip it symmetrically from both edges instead of unrolling it from one side. A short delay before showing prevents flicker when the cursor sweeps across.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Bubble contents. |
| children | ReactElement | — | The trigger. Receives aria-describedby. |
| placement | "top" | "bottom" | "left" | "right" | "top" | Which side the bubble sits on. |
| delay | number | 120 | Delay before showing, in ms. |
| gap | number | 0 | Space between the trigger and the risen bubble, in px. |