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>
  );
}

Delay Control

Use delay to control how long to wait before opening (default: 600ms) and closeDelay to control how long to wait before closing (default: 0ms).

import { Tooltip, TooltipProvider, Button } from "@cloudflare/kumo";

/**
 * Control the delay before opening and closing the tooltip.
 * `delay` controls open delay (default: 600ms), `closeDelay` controls close delay (default: 0ms).
 */
export function TooltipDelayDemo() {
  return (
    <TooltipProvider>
      <div className="flex gap-4">
        <Tooltip content="Opens after 1 second" delay={1000} asChild>
          <Button variant="secondary">1s open delay</Button>
        </Tooltip>
        <Tooltip
          content="Stays open 500ms after leaving"
          closeDelay={500}
          asChild
        >
          <Button variant="secondary">500ms close delay</Button>
        </Tooltip>
        <Tooltip
          content="Instant open, stays 1s"
          delay={0}
          closeDelay={1000}
          asChild
        >
          <Button variant="secondary">Instant + 1s close</Button>
        </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