Components
Tooltip
A short label that appears next to an element on hover and keyboard focus.
Playground
Copies the link
Figma variant
👉 Position=Bottom
🤥 Beak=True
🎛 Type=DefaultPositions
Twelve positions: above, below, before or after the element, centered or aligned to an edge. The beak points at the element and can be hidden.
Position=BottomPosition=TopPosition=RightPosition=Left
Tokens
| Part | Token |
|---|---|
| Background | --color-surface-level-3 |
| Line | --border-width --color-surface-level-4 |
| Padding | --space-tiny --space-small |
| Radius | --radius-form-element-small |
| Text | --text-ui-text-small-regular, --color-foreground-high-emphasis |
Notes from Figma
- 👉 Position names the side of the beak, so Position=Bottom is a tooltip above the element (placement="top").
- The text is an unbound 12px Medium style; code uses ui/text small/regular.
- The beak is two vectors (18×8); code draws a 12px square turned 45°, which is the same size.
- Hug Content changes the width by 2px only; code always hugs and wraps at 200px.
- Type=HTML is a .tooltip html component with a surface/level-2 beak; code takes any content in content.
- There is no z-index token; the tooltip is absolutely positioned and can be clipped by a scrolling parent.
Figma to code
| Figma | React |
|---|---|
| 👉 Position = Bottom / Bottom Left / Bottom Right | placement='top' / 'top-start' / 'top-end' |
| 👉 Position = Top / Top Left / Top Right | placement='bottom' / 'bottom-start' / 'bottom-end' |
| 👉 Position = Left / Left Top / Left Bottom | placement='right' / 'right-start' / 'right-end' |
| 👉 Position = Right / Right Top / Right Bottom | placement='left' / 'left-start' / 'left-end' |
| 🤥 Beak = False | beak={false} |
| 🎛 Type = HTML | content={<…/>} |