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
| 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 |