docs / core / tooltip
Tooltip
a short label that surfaces on hover or focus and says what a thing is: the name of an icon button, a keyboard shortcut, a word too clipped to read. never more than you can take in at a glance.
intensity · recedesrsc · client
provenance
authored in usvalayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
icon-only buttons, truncated text, terse toolbar actionsthe trigger's render prop puts it on an existing element instead of nesting a second buttonno interactive content inside. that is a Popovernever the only place information lives. it is a hint, not the labela11y
opens on focus as well as hover · content is portalled withrole="tooltip" and wired to the trigger via aria-describedby · escape dismisses · exit animation honors motion-reducejest-axedependencies
@base-ui/reactlive demo · try it out
customize
contentthe label on hover and focus
sideOffsetgap from the trigger, in pixels
usage
import { Tooltip, TooltipContent, TooltipTrigger } from "@usva-ui/react/primitives/tooltip";
<Tooltip>
<TooltipTrigger render={<Button variant="outline">Hover me</Button>} />
<TooltipContent>Deploys the current branch</TooltipContent>
</Tooltip>props
| prop | type | default | notes |
|---|---|---|---|
| delay | number | — | hover delay in ms before opening. set on TooltipProvider, shared by every tooltip under it. |
| defaultOpen | boolean | — | open on mount, uncontrolled. |
| open | boolean | — | controlled open state. |
| onOpenChange | (open: boolean) => void | — | fires when the open state changes. |
| sideOffset | number | 6 | distance in px between trigger and content, on TooltipContent. |
get it
bun add @usva-ui/reactusage
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@usva-ui/react/primitives/tooltip";
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<button>Hover me</button>} />
<TooltipContent>Helpful hint</TooltipContent>
</Tooltip>
</TooltipProvider>