Components
Tooltip
A tooltip component with dark/light variants, multiple sizes, positioned arrow, and rich HTML content support.
Installation
bunx @happlyui/cli@latest add tooltip
Dependencies
npm packages
@radix-ui/react-tooltip
Registry dependencies
These are automatically installed when you add this component.
tv
Usage
import * as Tooltip from "@/components/ui/tooltip"
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger>Hover me</Tooltip.Trigger>
<Tooltip.Content>Tooltip content.</Tooltip.Content>
</Tooltip.Root>
</Tooltip.Provider>
Examples
Light
Light variant tooltip with white background and border.
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button.Root>Hover</Button.Root>
</Tooltip.Trigger>
<Tooltip.Content variant="light">Tooltip content.</Tooltip.Content>
</Tooltip.Root>
Size
Tooltips in medium, small (default), and xsmall sizes.
<Tooltip.Content size="medium">Medium</Tooltip.Content>
<Tooltip.Content size="small">Small</Tooltip.Content>
<Tooltip.Content size="xsmall">XSmall</Tooltip.Content>
Position
Tooltips positioned on all four sides: left, top, bottom, right.
<Tooltip.Content side="left">Left</Tooltip.Content>
<Tooltip.Content side="top">Top</Tooltip.Content>
HTML Content
Tooltip with rich HTML content including icon, title, and description.
<Tooltip.Content size="medium" variant="light">
<div className="flex gap-3">
<RiGlobalLine />
<div>Title and description</div>
</div>
</Tooltip.Content>
API Reference
Tooltip.Root
Wraps the trigger and content. Passes through Radix Tooltip.Root props.
| Prop | Type | Default | Description |
|---|
Tooltip.Trigger
The element that triggers the tooltip on hover/focus.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Render as child element using Radix Slot |
Tooltip.Content
The tooltip popup content with arrow.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'dark' | 'light' | 'dark' | The visual variant |
size | 'xsmall' | 'small' | 'medium' | 'small' | The size of the tooltip |
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | The preferred side to position the tooltip |
sideOffset | number | 4 | Distance in pixels from the trigger |
Tooltip.Provider
Wraps your app to provide shared tooltip delay and skip settings.
| Prop | Type | Default | Description |
|---|