Tooltip
A short hint on hover or focus, on Colors/surface/overlay with the default border. Below its trigger by default.
Figma: 10 / Components / TooltipUsage
Source: src/components/ui/tooltip.tsx
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'<Tooltip>
<TooltipTrigger render={<Button variant='outline' />}>Hover me</TooltipTrigger>
<TooltipContent>Shown on hover and focus</TooltipContent>
</Tooltip>Placement
side bottom by default; top, left and right are available.
When to use
When to reach for it, and when to use something else.
Use it for
Complete: Naming icon-only buttons.
Complete: Explaining a metric in one sentence.
Avoid
Not complete: Information people need to finish a task; put it on the page.
Not complete: Interactive content; use a Popover.
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Where the tooltip sits. |
| align | 'start' | 'center' | 'end' | 'center' | Alignment along the side. |
| sideOffset | number | 8 | Distance from the trigger. |
