Tooltips reveal a short label, and optionally one line of supporting text, over a focusable trigger on hover or keyboard focus.
Tooltips reveal a short label, and optionally one line of supporting text, over a focusable trigger on hover or keyboard focus.
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.
The trigger in this demo is fixed
Tooltip element only and needs a trigger child pasted inside it before it compiles. The trigger picker swaps between the 2 fixtures and never reaches the snippet. Full pasteable examples live on the Code tab.Two components from one module: the overlay most screens use, and the unstyled focusable wrapper for content that cannot take focus on its own.
| Component | Description | Import from |
|---|---|---|
| Tooltip | The overlay plus trigger wrapper: title, optional description, placement, arrow, and delays around one trigger child. | @/components/base/tooltip/tooltip |
| TooltipTrigger | An unstyled focusable button for giving icons or text a tooltip. Ships with no focus ring of its own; see Accessibility. | @/components/base/tooltip/tooltip |
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.
Corner placements are nudged
crossOffset yourself to override it; details on the Code tab.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.
TooltipTrigger ships unstyled, focus ring included
outline-hidden class leaves keyboard focus with no visible indicator, measured on the rendered element, and h-max w-max makes a bare size-4 icon a 16×16 target. Give a custom trigger your own focus style and padding, and give every icon-only trigger an aria-label: the tooltip describes, it does not name. The help-icon triggers on this page do all three, so what you see above is the corrected pattern rather than the bare one.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.
Hover and focus treatments live on the trigger