Tooltip
Hover-activated tooltip for showing additional context. Supports four positioning options.
Installation
$ npx shadcn@latest add tooltipPreview
Usage (React/TSX)
import { Tooltip } from "@/components/ui/tooltip"
import { Button } from "@/components/ui/button"
export default function ActionBar() {
return (
<Tooltip content="Save changes" side="bottom">
<Button size="sm">Save</Button>
</Tooltip>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | string | — | Text content of the tooltip. |
| side | "top" | "bottom" | "left" | "right" | "top" | Which side the tooltip appears on. |
| children | ReactElement | — | The element that triggers the tooltip on hover. |