Tooltip
Small label that appears on hover or focus to describe an element.
Variants
Tooltips support four placements. Choose the one that avoids clipping and keeps the trigger visible.
| Variant | Purpose |
|---|---|
| Top | Default placement. Works well for icon buttons and inline controls. |
| Bottom | Use when the trigger is near the top of the viewport. |
| Left | Use for triggers against a right edge (e.g. action columns). |
| Right | Use for triggers against a left edge (e.g. sidebar controls). |
Design tokens
| Token | Value | Description |
|---|---|---|
tooltip/background | #3b3b3d | Tooltip background |
tooltip/text | #ffffff | Tooltip label text |
radius/xs | 4px | Corner radius |
shadow/sm | 0 2px 8px rgba(0,0,0,0.12) | Elevation shadow |