Tooltip
Tooltips display informative text when users hover over, focus on, or tap an element.
Installation
The Tooltip component is part of the design system. Import it from the UI package.
import { Tooltip } from "@/components/ui/tooltip"Usage
Wrap a trigger element with Tooltip and set content. Copy the example below to get started.
This is a tooltip
<Tooltip content="This is a tooltip">
<Button variant="primary">Hover me</Button>
</Tooltip>Examples
Copy any example below to use in your project. Tooltip supports side, align, arrow, and optional supporting text.
Without supporting text
This is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltip
With supporting text
This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.
This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.
This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.This is a tooltipTooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.
<Tooltip
content="This is a tooltip"
supportingText="Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text."
side="top"
align="center"
arrow
>
<Button variant="outline">Hover me</Button>
</Tooltip>API Reference
The Tooltip component displays informative text on hover, focus, or tap. It supports content, supporting text, side, align, and arrow.
| Prop | Type | Default |
|---|---|---|
| content | React.ReactNode | — |
| supportingText | React.ReactNode | — |
| side | "top" | "bottom" | "left" | "right" | — |
| align | "start" | "center" | "end" | — |
| arrow | boolean | — |
| delayDuration | number | — |
| open | boolean | — |
| defaultOpen | boolean | — |
| onOpenChange | (open: boolean) => void | — |
| asChild | boolean | — |
Tooltip also accepts all standard HTMLSpanElement attributes.
interface TooltipProps extends React.HTMLAttributes<HTMLSpanElement> {
content: React.ReactNode
supportingText?: React.ReactNode
side?: "top" | "bottom" | "left" | "right"
align?: "start" | "center" | "end"
arrow?: boolean
delayDuration?: number
open?: boolean
defaultOpen?: boolean
onOpenChange?: (open: boolean) => void
asChild?: boolean
children: React.ReactElement
}