Basic
Sides
With Delay
Sub-components
| Component | Description |
|---|---|
| Tooltip.Provider | Wraps your app or section to share delay configuration |
| Tooltip | Root provider for a single tooltip instance |
| Tooltip.Trigger | The element that triggers the tooltip on hover |
| Tooltip.Content | The popup content displayed on hover |
Content Props
| Prop | Type | Description |
|---|---|---|
| side | "top" | "right" | "bottom" | "left" | Preferred side of the trigger to render against |
| sideOffset | number | Distance in pixels from the trigger (default: 4) |
| align | "start" | "center" | "end" | Alignment against the trigger |
| delayDuration | number | Duration from hover to open in ms (Provider prop, default: 0) |
| className | string | Additional classes on the tooltip content |
Usage
<Tooltip.Provider>
<Tooltip>
<Tooltip.Trigger asChild>
<Button>Hover me</Button>
</Tooltip.Trigger>
<Tooltip.Content side="top">
<p>Tooltip text</p>
</Tooltip.Content>
</Tooltip>
</Tooltip.Provider>