Tooltip

A wrapper around React Aria’s TooltipTrigger and Tooltip components. Appears on hover or keyboard focus after a short delay and is announced by screen readers.

Add via CLI

npx @a2ra/cli add tooltip

Basic

Example JSON

{
  "type": "Tooltip",
  "props": {
    "content": "This action cannot be undone.",
    "triggerLabel": "Delete",
    "placement": "top"
  }
}

Props

Prop	Type	Description
content	string	Tooltip text
triggerLabel	string	Label for the trigger button
placement	top default bottom left right	Preferred position
isOpen	boolean	Controlled open state
defaultOpen	true false default	Open on mount
offset	number	Distance from the trigger in pixels. Default: 8
crossOffset	number	Perpendicular offset in pixels. Default: 0
shouldFlip	true default false	Flip to opposite side when out of bounds

Notes

• Tooltip is for non-interactive hints only. For interactive content, use Popover instead.
• The tooltip appears after a 1.5s delay on hover and immediately on keyboard focus.
• Screen readers announce the tooltip content when the trigger is focused.