Overlays6
Tooltip
Tooltips that open instantly once one is showing.
Installation
npx shadcn@latest add @quireui/tooltipUsage
// Once, near the root
<TooltipProvider>{children}</TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button size="icon" aria-label="Settings" />}>
<GearSixIcon />
</TooltipTrigger>
<TooltipContent>Settings</TooltipContent>
</Tooltip>Accessibility
A tooltip is a visual hint, and screen readers may not read it, so the trigger needs its own name, like aria-label on an icon button. Button's tooltip prop gives an icon button its name for you.
| Key | Action |
|---|---|
| Tab | Focusing the trigger opens its tooltip right away, without the hover delay. |
| Esc | Closes the tooltip. Focus stays on the trigger. |
API reference
TooltipProvider
Wrap the app once. After the first tooltip opens, neighbours open instantly (no delay, no animation), so scanning a toolbar never feels laggy.
Also takes every prop of Base UI's Tooltip.Provider.
TooltipTrigger
Also takes every prop of Base UI's Tooltip.Trigger.
TooltipContent
Also takes every prop of Base UI's Tooltip.Popup. Style it with [data-slot="tooltip"].
Tooltip
Also takes every prop of Base UI's Tooltip.Root.