Tooltips

Change the props and copy the result. Every control except the trigger picker is a real Tooltip prop; isOpen pins the overlay so placements can be compared without hovering.

Two components from one module: the overlay most screens use, and the unstyled focusable wrapper for content that cannot take focus on its own.

The 4 sides and 4 corner alignments, all live and pinned open with the arrow on. The Figma sheet draws only the 2 corners above the trigger; the 2 below are the kit’s, included here because the code supports them. The full react-aria union carries 22 values. Each corner is nudged 12px toward the aligned edge by the kit’s cross-offset logic, negative on the left and positive on the right, so the bubble balances over its trigger; the 4 plain sides get no nudge. That logic also covers the 4 logical corner forms, top start through bottom end, which are not shown here. In production, a placement that runs out of room at a viewport edge flips to the opposite side on its own; this gallery disables the flip so every bubble stays on its labeled side at any scroll position.

Title only is the compact form most tooltips should use; a description switches the bubble to its padded form and caps its width at 320px. The arrow is off by default and works with both forms.

Both trigger patterns, live: hover or Tab to either to see its tooltip. Any focusable kit control works as a trigger; TooltipTrigger is the wrapper for content that cannot take focus on its own, like a bare icon.

Every state below is a real prop on a live component, not a repainted approximation: isOpen pins the overlay, isDisabled suppresses it, and trigger picks which interactions open it. The overlay itself has one visual treatment; open or closed is the whole state space.