React 19, keyboard support, ARIA, portals, positioning, auto flip, and auto placement
Press enter or click to view image in full size
A tooltip looks small. A good tooltip is not.
By the end, the component will support:
hover
keyboard focus
Escape to dismiss
aria-describedby
role="tooltip"
React portals
top, bottom, left, and right
viewport clamping
scroll and resize updates
pointer movement from trigger to tooltip
automatic flipping
placement="auto"
requested placement vs actual placement
The original tutorial contains 29 checkpoints from Step 0 through Step 28. This Medium version keeps the same build order, but removes repeated cumulative code. Each step shows only the new idea. The complete component is included near the end.
Step 0 — Set up CodePen (or your own editor)
Goal
Keep the environment simple. All later changes should come from the tooltip code.
