Build An Accessible React Tooltip From Scratch

THE STEP-BY-STEP JOURNEY

1. Step 0 — CodePen Setup 3
2. Step 1 — Create the Smallest Possible Tooltip 5
3. Step 2 — Show the Tooltip Only on Hover 6
4. Step 3 — Remove the Wrapper Problem 7
5. Step 4 — Preserve Existing Event Handlers 8
6. Step 5 — Mouse Is Not Enough 9
7. Step 6 — Support Escape to Dismiss 11
8. Step 7 — Add Tooltip Semantics 13
9. Step 8 — We Need Access to the Real DOM 15
10. Step 9 — Render the Tooltip in a Portal 17
11. Step 10 — Measure the Trigger 19
12. Step 11 — Add Four Placements 21
13. Step 12 — Keep the Tooltip Inside the Viewport 23
14. Step 13 — Recalculate on Scroll and Resize 25
15. Step 14 — Make the Tooltip Hoverable 27
16. Step 15 — Store a Timer in a Ref 29
17. Step 16 — Let the Tooltip Cancel the Close 31
18. Step 17 — Understand Why Clamping Is Not Auto Layout 35
19. Step 18 — Measure Available Space 38
20. Step 19 — Determine How Much Space We Need 41
21. Step 20 — Add Auto Flip 44
22. Step 21 — Add placement="auto" 47
23. Step 22 — Requested Placement vs Actual Placement 50
24. Step 23 — The Final Positioning Pipeline 53
25. Step 24 — Final Complete Component 56
26. Step 25 — What Each React Feature Is Doing 59
27. Step 26 — The Final Architecture 62
28. Step 27 — Important Concept: React vs the Browser 66
29. Step 28 — Accessibility Boundary 69