Tooltip

Names an icon-only control on hover and focus.

import { Button, Tooltip } from "@openperf/deft";
import { IconPlus } from "@tabler/icons-react";

import { Preview } from "../../src/Preview";

export default function TooltipBasic() {
  return (
    <Preview overlay={true}>
      <Tooltip.Root>
        <Tooltip.Trigger render={<Button.Root aria-label="Add" shape="square" />}>
          <IconPlus />
        </Tooltip.Trigger>
        <Tooltip.Content>Add</Tooltip.Content>
      </Tooltip.Root>
    </Preview>
  );
}

• Tooltips name things; they never hold information that isn’t anywhere else. Use a Popover for content people need to read or act on.
• The trigger still needs an aria-label.
• Wrap the app in one Tooltip.Provider. After one tooltip opens, neighbouring tooltips open without another delay.
• Tooltip.Content sits above the trigger, centred, and wraps long text. Pass side and align to move it.

API

Other Tooltip.Content props go to the Base UI popup. Parts: Root, Trigger, Provider, Content; the other Base UI parts pass through unstyled. Built on Base UI Tooltip.