Components

Tooltip

Supplemental text disclosure for hover, focus, and long-press interactions.

When to Use

Use Tooltip for a short text hint that explains a control without requiring interaction, especially an unfamiliar icon. Use visible text when the information is important, HoverCard for a richer preview, and Popover when the floating content contains buttons, links, or other controls.

Features

• Provider-level delay configuration.
• Controlled and uncontrolled open state.
• Opens on pointer hover, keyboard focus-visible, and touch long press.
• Floating UI positioning with side, align, side offset, collision shift, flip, and arrow coordinates.
• aria-describedby wiring between trigger and tooltip content.
• Portal and arrow parts.

Import

import { Tooltip } from "@flowstack-ui/atom";

Anatomy

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger />
    <Tooltip.Portal>
      <Tooltip.Content>
        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>

API Reference

Provider

Shares open, close, and skip-delay timing between descendant tooltips. Provider renders no DOM element.

ARIA: Provider renders no element and adds no ARIA attributes.

Data attributes: Provider renders no element and exposes none.

Root

Owns one tooltip's open state, timers, Escape dismissal, touch state, and plain or rich hover behavior. Root renders no DOM element.

ARIA: Root renders no element and adds no ARIA attributes.

Data attributes: Root renders no element and exposes none.

Trigger

Reference element that describes itself with tooltip content while open.

Portal

Moves Content to another DOM container without rendering a wrapper.

ARIA: Portal adds no ARIA attributes.

Data attributes: Portal renders no wrapper and exposes none.

Content

Renders the positioned tooltip text and keeps rich variants open while the pointer moves from Trigger into Content.

Arrow

Renders a decorative SVG pointer using the final side chosen after collision handling. getTooltipArrowGeometry exposes the same geometry for custom arrows.

ARIA: Arrow is decorative and hidden from assistive technology.

Advanced compound parts can read the Provider, Root, and Content contexts with their public hooks and providers. getTooltipArrowGeometry returns the same SVG geometry used by Arrow.

Examples

Basic Tooltip

import { Tooltip } from "@flowstack-ui/atom";

export default function SaveTooltip() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <button type="button">Save</button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content>Save changes</Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}

Custom Trigger

import { Tooltip } from "@flowstack-ui/atom";

export default function HelpTooltip() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <button type="button">Help</button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content side="right">More information</Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}

Accessibility

Tooltip follows the WAI-ARIA tooltip pattern. Content is referenced by aria-describedby while open and must remain non-interactive.

Changelog

See CHANGELOG.md.