Tooltip

<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

<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>

We recommend using asChild with a Kumo Button (as shown above). However, when asChild is omitted, Tooltip wraps children in an internal button element. Defensive styles are applied to protect this element from global CSS pollution. You can override these defaults via className.

<Tooltip
  content="Click to learn more"
  className="inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95"
>
  <Info className="size-4" />
  <span>Help</span>
</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

Kumo