<Tooltip content="Add new item" asChild>
<Button shape="square" icon={PlusIcon} />
</Tooltip>Installation
Barrel
import { Tooltip, TooltipProvider } from "@cloudflare/kumo";Granular
import { Tooltip, TooltipProvider } from "@cloudflare/kumo/components/tooltip";Usage
import { Tooltip, Button } from "@cloudflare/kumo";
export default function Example() {
return (
<Tooltip content="Tooltip text" asChild>
<Button>Hover me</Button>
</Tooltip>
);
}For delay grouping across multiple tooltips, see TooltipProvider.
Examples
Basic Tooltip
<Tooltip content="Add" asChild>
<Button shape="square" icon={PlusIcon} />
</Tooltip>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>TooltipProvider
TooltipProvider groups multiple tooltips so that after the first tooltip has been shown, switching to another skips the open delay. Place it once at your app root or layout — not around each individual Tooltip.
// Wrap your app or layout once
<TooltipProvider>
<App />
</TooltipProvider>
// Then use Tooltip anywhere inside
<Tooltip content="Add" asChild>
<Button shape="square" icon={PlusIcon} />
</Tooltip>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 |