Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Basic Usage
Basic Tooltip
Hover over the button to see the tooltip.
Variants
Tooltip Variants
Default and destructive variants.
Without Arrow
Hide Arrow
Tooltip without the arrow indicator.
Positioning
Tooltip Positions
Tooltips can be positioned on different sides.
With Delay
Delayed Tooltip
Configure the delay before showing the tooltip.
API Reference
TooltipProvider
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | number | 0 | Delay in ms before showing tooltip |
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | Visual style variant |
hideArrow | boolean | false | Hide the arrow indicator |
side | "top" | "bottom" | "left" | "right" | "top" | Side to display the tooltip |
class | string | - | Additional CSS classes |