Components
Tooltip
Displays brief, contextual information when hovering over or focusing on an element, improving clarity without cluttering the interface.
Loading
Installation
pnpm dlx shadcn@latest add @toui/tooltip
Examples
Light
Loading
Side
Loading
Pattern
Tokens
7 CSS variables in 7 categories.
px
| CSS Variable | Value | Description |
|---|---|---|
--tooltip-px | var(--component-px-sm) | 8px |
py
| CSS Variable | Value | Description |
|---|---|---|
--tooltip-py | 0.25rem | 4px |
text
| CSS Variable | Value | Description |
|---|---|---|
--tooltip-text | var(--component-text-xs) | 10px |
radius
| CSS Variable | Value | Description |
|---|---|---|
--tooltip-radius | var(--component-radius-sm) | — |
max-width
| CSS Variable | Value | Description |
|---|---|---|
--tooltip-max-width | 18rem | 288px |
bg
| CSS Variable | Value | Description |
|---|---|---|
--tooltip-bg | var(--popover) | — |
text-color
| CSS Variable | Value | Description |
|---|---|---|
--tooltip-text-color | var(--popover-foreground) | — |
Credits
- Used Radix UI for the tooltip component.