Tooltips appear everywhere in production UIs — yet building one correctly is harder than it looks. A naive position: absolute tooltip gets clipped by any ancestor with overflow: hidden, breaks near viewport edges, and fails accessibility audits because screen readers can't discover the hidden text.
Build a reusable <Tooltip> component that accepts text and position (top/bottom/left/right) props and wraps any children. It should appear on hover and keyboard focus, be properly linked to the trigger via ARIA, and never get clipped by container overflow.
The architectural solution is a React Portal: render the tooltip into document.body and compute its position from getBoundingClientRect(). This completely sidesteps all overflow and stacking-context issues.