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.
TooltipTrigger
The element that reveals the tooltip on hover or focus. Use asChild.
TooltipContent
The floating label. side and sideOffset control placement.
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/ui/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.