Tooltip - Kumo

import { Tooltip, TooltipProvider, Button } from "@cloudflare/kumo";
import { PlusIcon } from "@phosphor-icons/react";

export function TooltipHeroDemo() {
  return (
    <TooltipProvider>
      <Tooltip content="Add new item" asChild>
        <Button shape="square" icon={PlusIcon} aria-label="Add new item" />
      </Tooltip>
    </TooltipProvider>
  );
}

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

import { Tooltip, TooltipProvider, Button } from "@cloudflare/kumo";
import { PlusIcon } from "@phosphor-icons/react";

export function TooltipBasicDemo() {
  return (
    <TooltipProvider>
      <Tooltip content="Add" asChild>
        <Button shape="square" icon={PlusIcon} aria-label="Add" />
      </Tooltip>
    </TooltipProvider>
  );
}

Multiple Tooltips

import { Tooltip, TooltipProvider, Button } from "@cloudflare/kumo";
import { PlusIcon, TranslateIcon } from "@phosphor-icons/react";

export function TooltipMultipleDemo() {
  return (
    <TooltipProvider>
      <div className="flex gap-2">
        <Tooltip content="Add" asChild>
          <Button shape="square" icon={PlusIcon} aria-label="Add" />
        </Tooltip>
        <Tooltip content="Change language" asChild>
          <Button
            shape="square"
            icon={TranslateIcon}
            aria-label="Change language"
          />
        </Tooltip>
      </div>
    </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