Components · Overlays
The two light, floating hint surfaces. A popover is an anchored panel with a caret that holds real, interactive content — a mini-form, a settings cluster, a confirm; it closes on outside-press and Esc. A tooltip is a passive hint on hover or keyboard focus, on its own distinct tooltip floor, and must never be the only carrier of meaning.
Notify Northside team
Sends a push + in-app alert to the 14 active rescuers on Northside Foster Circle about the intake at Harborview.
The icon-only trigger keeps its own aria-label — the tooltip only adds detail.
Send alert is pinned :hover and the help button is pinned .is-hover; hover either trigger (or tab in) for the live state and focus ring. The switch inside the popover proves it holds real, focusable controls — the line a tooltip must never cross.
Source · <Popover> + <Tooltip> / <TooltipProvider> from @phauna/ds/overlays · .popup.popup--popover (popup__title/__body/__arrow) & .tooltip (styles/components.css, catalog/disclosure.css) · demo OverlaysDemo.tsx
.popup floor — surface-3, --radius-md (6px), the overlay elevation shadow + inner-glow. The popup--popover modifier adds 16px padding and a 14–22rem width for real content.surface-3 + hairline border, poking half-out toward the trigger. It re-points per side — up when the panel opens bottom, down when it flips above.popup__title (14px semibold) + popup__body (13px muted). Unlike a tooltip the body is interactive — here a toggle row and a ghost / primary action foot.--color-tooltip (#323a4a), --radius-sm (4px), an 8px arrow. Capped at 260px; opens on the shared TooltipProvider delay.aria-label, and the hint is invisible to touch and skimming.