Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Tooltip
A popup that displays brief informational text when the user hovers over or focuses an element. Essential for providing accessible labels on icon-only buttons and supplementary context on interactive controls.
Default
A basic
Tooltip that appears on hover, wrapped in a TooltipProvider for consistent delay behavior.
Loading example…
Positions
Use the
Side parameter on TooltipContent to control which side the tooltip appears on. Available values are Top, Right, Bottom, and Left.
Loading example…
Icon Buttons
Tooltips are essential for icon-only buttons to provide accessible labels. Wrap each icon
Button in a Tooltip to explain its action on hover or focus.
Loading example…
Custom Variant
Use the
Class parameter on TooltipContent to override the default background, text, and border colors. Since the component uses Tailwind merge, your custom classes take precedence over the base styles.
Loading example…
Custom Delay
Set
DelayDuration to 0 on the Tooltip component to show the tooltip immediately without any hover delay.
Loading example…