<TooltipProvider>
<Tooltip content="Add new item" asChild>
<Button shape="square" icon={PlusIcon} />
</Tooltip>
</TooltipProvider>Installation
import { Tooltip, TooltipProvider } from "~/components/tooltip/tooltip";Usage
import { Tooltip, TooltipProvider } from "~/components/tooltip/tooltip";
import { Button } from "~/components/button/button";
export default function Example() {
return (
<TooltipProvider>
<Tooltip content="Tooltip text" asChild>
<Button>Hover me</Button>
</Tooltip>
</TooltipProvider>
);
}Examples
Basic Tooltip
<TooltipProvider>
<Tooltip content="Add" asChild>
<Button shape="square" icon={PlusIcon} />
</Tooltip>
</TooltipProvider>Multiple Tooltips
<TooltipProvider>
<div className="flex gap-2">
<Tooltip content="Add" asChild>
<Button shape="square" icon={PlusIcon} />
</Tooltip>
<Tooltip content="Change language" asChild>
<Button shape="square" icon={TranslateIcon} />
</Tooltip>
</div>
</TooltipProvider>API Reference
| Prop | Type | Default |
|---|---|---|
| content | React.ReactNode | undefined |
| asChild | boolean | false |
| open | boolean | undefined |