Components
Tooltip
A label that appears on hover or focus. Use it for supplementary hints, never for essential information.
Preview
Hover or focus the trigger. The surface uses the background-inverse token: a high-contrast dark-on-light (and light-on-dark) chip, not brand purple: so it remaps correctly on theme toggle.
Sides
Set side on TooltipContent (top / right / bottom / left); position flips on collision.
API
Part
Description
TooltipProvider
Wraps the app or a region; sets delayDuration for the tooltips inside.
Tooltip
Root for a single tooltip. Holds open / defaultOpen. disabled keeps it closed and takes precedence over open.
TooltipTrigger
The element that reveals the tooltip on hover or keyboard focus. Programmatic focus (for example dialog autofocus) does not open it. Use asChild.
TooltipContent
The floating label. side and sideOffset control placement.
TooltipPortal
The portal TooltipContent renders into. It uses the PortalContainerProvider element, or document.body without a provider.
Don't and Do
Don't
Don't paint the tooltip surface brand purple: a tooltip is a high-contrast inverse chip, not a brand element. And don't hide essential info or actions in one; it's hover-only and invisible on touch.
Do
// Short, supplementary label on an icon button
<TooltipContent>Save changes</TooltipContent>import {
Tooltip,
TooltipTrigger,
TooltipContent,
TooltipProvider,
} from "@/components/shadcn/tooltip";
export function SaveButton() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button size="icon"><Save /></Button>
</TooltipTrigger>
<TooltipContent>Save changes</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}Wrap the app (or a region) in a single TooltipProvider, then use Tooltip / TooltipTrigger / TooltipContent per trigger.