Tooltip
A lightweight tooltip that appears on hover. Supports four positions, custom delay, and rich content.
Default
A basic tooltip that appears above the trigger on hover.
Default
Positions
Four placement options: top, bottom, left, right.
Positions
Custom Delay
Control how quickly the tooltip appears.
Delay
Rich Content
Tooltips can contain JSX, not just plain text.
Rich Content
Usage
Import the Tooltip component and wrap any trigger element.
tsx
import { Tooltip } from "@/components/ui/Tooltip";
// Basic
<Tooltip content="Edit this item">
<button>Hover me</button>
</Tooltip>
// Position
<Tooltip content="Below" position="bottom">
<button>Bottom tooltip</button>
</Tooltip>
// Custom delay
<Tooltip content="Quick" delay={0}>
<button>Instant</button>
</Tooltip>
// Rich content
<Tooltip content={<span>Press <kbd>⌘K</kbd></span>}>
<button>Shortcut</button>
</Tooltip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Tooltip content (text or JSX). |
| children | ReactElement | — | Trigger element. |
| position | "top" | "bottom" | "left" | "right" | "top" | Tooltip placement. |
| delay | number | 200 | Delay in ms before showing. |