Tooltip
@cloudflare/kumo

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. 

<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

PropTypeDefaultDescription
align"start" | "center" | "end"-Alignment on the axis perpendicular to `side`. - `"start"` — Align to the start edge - `"center"` — Center-aligned - `"end"` — Align to the end edge
asChildboolean-When `true`, the trigger wraps the child element instead of adding a wrapper.
classNamestring-Additional CSS classes merged via `cn()`.
side"top" | "bottom" | "left" | "right""top"Preferred side of the trigger to render the tooltip. - `"top"` — Tooltip appears above the trigger - `"bottom"` — Tooltip appears below the trigger - `"left"` — Tooltip appears to the left of the trigger - `"right"` — Tooltip appears to the right of the trigger
content*ReactNode-Content to display in the tooltip