Tooltip
OverlaysA small popup that displays information on hover. Use tooltips to provide additional context or explanations for interface elements.
Import
import { Tooltip } from "@/components/ui/tooltip";Usage
Basic Tooltip
Simple tooltip on hover
Tooltip Positions
Tooltips on different sides
Icon Tooltip
Tooltip on an icon for additional information
Product name
Rich Content
Tooltip with formatted content
API Reference
content*—ReactNodeContent to display in the tooltip
children*—ReactNodeElement that triggers the tooltip
side"top""top" | "bottom" | "left" | "right"Preferred side for the tooltip
delay200numberDelay in ms before showing tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
content* | ReactNode | — | Content to display in the tooltip |
children* | ReactNode | — | Element that triggers the tooltip |
side | "top" | "bottom" | "left" | "right" | "top" | Preferred side for the tooltip |
delay | number | 200 | Delay in ms before showing tooltip |