Tooltip
A floating label that appears on hover or focus to provide contextual information.
Installation
pnpm dlx stera-ui@latest add tooltip
Sides
| Side | Description |
|---|---|
top | Above the trigger (default) |
right | Right of the trigger |
bottom | Below the trigger |
left | Left of the trigger |
With Kbd
Combine with Kbd to show keyboard shortcuts inside tooltips.
API Reference
Built on Base UI's Tooltip primitive — see the full API reference there.
TooltipProvider
| Prop | Type | Default |
|---|---|---|
delayDuration | number | 700 |
TooltipContent
| Prop | Type | Default |
|---|---|---|
side | "top" | "right" | "bottom" | "left" | "top" |
align | "start" | "center" | "end" | "center" |
sideOffset | number | 4 |
alignOffset | number | 0 |
TooltipTrigger
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |