Tooltip

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@zynactra/ui/tooltip"

<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

Examples

Icon buttons

A toolbar of icon-only buttons. Each has an aria-label, and its tooltip repeats the same text.

Disabled button

Explaining why an action isn't available. A disabled button gets no hover or focus, so a focusable span around it is the trigger.

Guidelines

• Tooltips name things; they don't explain them. Anything longer than a few words belongs in a Popover or in the page.
• Every icon-only button needs one, plus an aria-label. The aria-label is the button's name; the tooltip is not.
• Tooltips don't open on touch devices. If someone must know why a button is disabled, say it in the page too.

API reference

Behaviour and props come from Base UI. See the Base UI Tooltip docs.