---
import { buttonVariants } from "@/components/ui/button"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
---
<Tooltip>
<TooltipTrigger class={buttonVariants({ variant: "outline" })}>
Show Tooltip
</TooltipTrigger>
<TooltipContent>Add to project</TooltipContent>
</Tooltip>Installation
npx shadcn@latest add @fulldev/tooltipUsage
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"<Tooltip>
<TooltipTrigger class="rounded-md border px-3 py-2"
>Show Tooltip</TooltipTrigger
>
<TooltipContent>Add to project</TooltipContent>
</Tooltip>Composition
Use the following composition to build a Tooltip:
Tooltip
├── TooltipTrigger
└── TooltipContentExamples
---
import { buttonVariants } from "@/components/ui/button"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
---
<div class="flex flex-wrap items-center gap-3">
<Tooltip side="top">
<TooltipTrigger class={buttonVariants({ variant: "outline" })}>
Top
</TooltipTrigger>
<TooltipContent>Top tooltip</TooltipContent>
</Tooltip>
<Tooltip side="right">
<TooltipTrigger class={buttonVariants({ variant: "outline" })}>
Right
</TooltipTrigger>
<TooltipContent>Right tooltip</TooltipContent>
</Tooltip>
<Tooltip side="bottom">
<TooltipTrigger class={buttonVariants({ variant: "outline" })}>
Bottom
</TooltipTrigger>
<TooltipContent>Bottom tooltip</TooltipContent>
</Tooltip>
<Tooltip side="left">
<TooltipTrigger class={buttonVariants({ variant: "outline" })}>
Left
</TooltipTrigger>
<TooltipContent>Left tooltip</TooltipContent>
</Tooltip>
</div>API Reference
See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.