Tooltip

A short label shown on hover and keyboard focus. Replaces the native title attribute. It does not name the trigger: icon-only buttons still need aria-label.

Kumo source

import { DownloadSimpleIcon, PlusIcon } from "@phosphor-icons/react";
import { Button } from "@etched/reticle/button";
import { Tooltip, TooltipProvider } from "@etched/reticle/tooltip";

export function Preview() {
  return (
    <TooltipProvider>
      <div className="row">
        <Tooltip content="Add chip" defaultOpen render={<Button shape="square" aria-label="Add chip" icon={<PlusIcon />} />} />
        <Tooltip content="Download CSV" render={<Button shape="square" aria-label="Download CSV" icon={<DownloadSimpleIcon />} />} />
      </div>
    </TooltipProvider>
  );
}

Installation

import { Tooltip, TooltipProvider } from "@etched/reticle/tooltip";

Examples

Icon buttons

The tooltip does not name the button: give it an aria-label too.

import { DownloadSimpleIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
import { Button } from "@etched/reticle/button";
import { Tooltip, TooltipProvider } from "@etched/reticle/tooltip";

export function IconButtons() {
  return (
    <TooltipProvider>
      <div className="row">
        <Tooltip content="Add chip" render={<Button shape="square" aria-label="Add chip" icon={<PlusIcon />} />} />
        <Tooltip content="Download CSV" render={<Button shape="square" aria-label="Download CSV" icon={<DownloadSimpleIcon />} />} />
        <Tooltip
          content="Delete trace"
          render={<Button shape="square" variant="ghost" aria-label="Delete trace" icon={<TrashIcon />} />}
        />
      </div>
    </TooltipProvider>
  );
}

Text and plain triggers

Without render, the children go in a plain button.

import { InfoIcon } from "../../icons.js";
import { Button } from "@etched/reticle/button";
import { Tooltip, TooltipProvider } from "@etched/reticle/tooltip";

export function TextAndPlainTriggers() {
  return (
    <TooltipProvider>
      <div className="row">
        <Tooltip content="Runs every night at 02:00 PT." render={<Button />}>
          Schedule
        </Tooltip>
        <Tooltip content="Owners get alerts for their chips.">
          <InfoIcon />
          What is an owner?
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}

Sides

import { Button } from "@etched/reticle/button";
import { Tooltip, TooltipProvider, type TooltipSide } from "@etched/reticle/tooltip";

const sides: TooltipSide[] = ["top", "right", "bottom", "left"];

export function Sides() {
  return (
    <TooltipProvider>
      <div className="row">
        {sides.map((side) => (
          <Tooltip key={side} content={`On the ${side}`} side={side} render={<Button variant="outline" />}>
            {side}
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  );
}

API reference

Prop	Type	Default	Description
content *	ReactNode	–	Text in the tooltip.
side	"top" \| "bottom" \| "left" \| "right"	"top"
align	"start" \| "center" \| "end"	"center"
delay	number	600	Milliseconds before it opens on hover.
closeDelay	number	0	Milliseconds before it closes.
render	ComponentPropsWithoutRef<typeof BaseTooltip.Trigger>["render"]	–	The trigger element, for example `render={<Button shape="square" aria-label="Delete" icon={…} />}`. Without it, `children` go in a plain button.
children	ReactNode	–
className	string	–	Class on the trigger, for layout.