Tooltip

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@nyte-ai/ui/tooltip";

A visible label and optional shortcut for a control with an accessible name. For longer content, use Preview card.

Usage

• Pass the control to TooltipTrigger through render. Give the control its own aria-label, because the tooltip does not name it.
• An icon-only Button also sets its label as the native title. Pass title={undefined} so only one tooltip appears.
• TooltipContent keeps line breaks in its text.
• Wrap the app once in TooltipProvider. A trigger's own delay or closeDelay overrides it.
• Keep instructions and disabled reasons visible outside the tooltip.

Anatomy

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

Examples

import { Button } from "@nyte-ai/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@nyte-ai/ui/tooltip";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger
      render={<Button iconOnly icon="copy" aria-label="Copy output" title={undefined} />}
    />
    <TooltipContent>Copy output</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger
      render={<Button iconOnly icon="trash" aria-label="Delete session" title={undefined} />}
    />
    <TooltipContent>Delete session ⌘⌫</TooltipContent>
  </Tooltip>
</TooltipProvider>;

Props

TooltipContent takes xstyle, className, and style. Its className and style cannot be functions of state. See Theming. Tooltip and TooltipTrigger are Base UI's.

The reference tables below come from Base UI, MIT, © Material-UI SAS.

Tooltip

Groups all parts of the tooltip. Doesn't render its own HTML element.

Root Props:

TooltipTrigger

An element to attach the tooltip to. Renders a <button> element.

Trigger Props:

Trigger Data Attributes:

TooltipContent

Renders the portal, positioner, and popup. Positioning props go to the positioner and the rest to the popup.

Positioner

Positions the tooltip against the trigger. Renders a <div> element.

Positioner Props:

alignOffset Prop Example:

<Positioner
  alignOffset={({ side, align, anchor, positioner }) => {
    return side === 'top' || side === 'bottom' ? anchor.width : anchor.height;
  }}
/>

sideOffset Prop Example:

<Positioner
  sideOffset={({ side, align, anchor, positioner }) => {
    return side === 'top' || side === 'bottom' ? anchor.height : anchor.width;
  }}
/>

collisionAvoidance Prop Example:

<Positioner
  collisionAvoidance={{
    side: 'shift',
    align: 'shift',
    fallbackAxisSide: 'none',
  }}
/>

Positioner Data Attributes:

Positioner CSS Variables:

Popup

A container for the tooltip contents. Renders a <div> element.

Popup Props:

Popup Data Attributes:

TooltipProvider

Provides a shared delay for multiple tooltips. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly.

Provider Props:

Accessibility

• Hover opens after delay. Keyboard focus opens at once.
• Escape, an outside press, and a trigger click close it.
• The popup appears without motion under prefers-reduced-motion: reduce.