Tooltip
A headless tooltip primitive for displaying additional information on hover or focus.
Basic
A simple tooltip on hover. Wrap your content in a
TooltipProvider and use TooltipTrigger with TooltipContent.Placement
Tooltips on different sides. Set the
Side parameter on TooltipContent to PopoverSide.Top, PopoverSide.Right, PopoverSide.Bottom, or PopoverSide.Left.With Custom Delay
Configure the delay before showing. Set
DelayDuration on the Tooltip component to override the provider default.With Icon Button
Tooltip on an icon button. Use
TooltipContent to provide accessible text for icon-only buttons.Anatomy
Loading example…