Components / overlay

overlay · @awesome-ds/react

Tooltip

Supplementary description for a control.

Rules: rule.a11y.wcag-aa

State matrix

idlerequired

Anatomy

  • trigger wrapper
  • tooltip bubble
  • description text

Keyboard contract

Appears on keyboard focus and disappears on blur or Escape.

Screen-reader contract

Tooltip text describes the trigger without replacing its accessible name.

Content rules

  • Add supplementary help only.
  • Never put interactive content in a tooltip.

Public API

PropTyperequiredDescription
labelstringrequiredSupplementary description
childrenReactNoderequiredVisible trigger content

Adaptation contracts

RTL
Use logical action alignment and preserve the safe primary/cancel reading order.
High contrast
Separate overlay, surface, focus, and actions with system-color boundaries.
Reduced motion
Open and close instantly or with opacity only; focus timing remains deterministic.

Verification IDs

Tooltip/focus-description

Live

Live

Copyable example

import { Tooltip } from "@awesome-ds/react";

<Tooltip label="Save">?</Tooltip>