<TooltipProvider>
<Tooltip content="Add new item" asChild>
<Button shape="square" icon={PlusIcon} />
</Tooltip>
</TooltipProvider>Installation
Barrel
import { Tooltip, TooltipProvider } from "@cloudflare/kumo";Granular
import { Tooltip, TooltipProvider } from "@cloudflare/kumo/components/tooltip";Usage
import { Tooltip, TooltipProvider, Button } from "@cloudflare/kumo";
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 | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "top" | - |
| className | string | - | Additional CSS classes |
| children | ReactNode | - | Child elements |
| content* | ReactNode | - | Content to display in the tooltip |