Contextual information on hover.
| Name | Type | Default | Description |
|---|---|---|---|
| contentrequired | ReactNode | — | Tooltip content |
| side | "top" | "right" | "bottom" | "left" | top | Tooltip position |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.tooltip | var(--tooltip) | Tooltip background (inverted - dark in light mode, light in dark mode) | |
| Text | color.tooltip-foreground | var(--tooltip-foreground) | Tooltip text (inverted) |
Hover over an element to reveal additional information.
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Hover me
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>Tooltips can appear on any side of the trigger element.
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>Top</TooltipTrigger>
<TooltipContent side="top"><p>Tooltip on top</p></TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>Bottom</TooltipTrigger>
<TooltipContent side="bottom"><p>Tooltip on bottom</p></TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>Left</TooltipTrigger>
<TooltipContent side="left"><p>Tooltip on left</p></TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>Right</TooltipTrigger>
<TooltipContent side="right"><p>Tooltip on right</p></TooltipContent>
</Tooltip>
</TooltipProvider>Tooltips can contain longer explanatory text.
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>
Help
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p>This tooltip has longer content that wraps...</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>