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.Positions
Use the
Side parameter on TooltipContent to control which side the tooltip appears on. Available values are Top, Right, Bottom, and Left.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.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.Custom Delay
Set
DelayDuration to 0 on the Tooltip component to show the tooltip immediately without any hover delay.