Tooltip
unreleasedstable
A small floating label that appears on hover or focus.
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
export function Component() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger type="button">Hover</TooltipTrigger>
<TooltipContent>Useful context.</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}TooltipProvider
Shared timing configuration for a group of tooltips.
Tooltip
Root owner for tooltip state and floating behavior.
TooltipTrigger
Trigger that opens the tooltip on hover or focus.
TooltipContent
Portaled floating content with viewport sizing and transitions.