Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
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.
Loading example…
Placement
Tooltips on different sides. Set the
Side parameter on TooltipContent to PopoverSide.Top, PopoverSide.Right, PopoverSide.Bottom, or PopoverSide.Left.
Loading example…
With Custom Delay
Configure the delay before showing. Set
DelayDuration on the Tooltip component to override the provider default.
Loading example…
With Icon Button
Tooltip on an icon button. Use
TooltipContent to provide accessible text for icon-only buttons.
Loading example…
Anatomy
Loading example…