How to implement a tooltip positioning engine
How to implement a tooltip positioning engine
💻 Codesandbox: https://codesandbox.io/s/positioning-...
00:00:00 Intro
00:01:19 Setup
00:11:10 Positioning tooltip
00:30:02 Move the tooltip as you scroll
00:46:12 Flip the tooltip as you hit the edge
01:02:50 Constraint tooltip within a boundary
01:07:00 Hide the tooltip when the target is off the screen
📚 Related Resources
Element.getBoundingClientRect https://developer.mozilla.org/en-US/d...
CSS Overflow https://developer.mozilla.org/en-US/d...
Element.clientHeight https://developer.mozilla.org/en-US/d...
Element.clientWidth https://developer.mozilla.org/en-US/d...
Difference between offsetHeight, clientHeight and scrollHeight
/ difference-between-offsetheight-clientheig...
Node.parentElement https://developer.mozilla.org/en-US/d...
🥰 Support me https://www.buymeacoffee.com/lihautan
🔗 Want to learn more from me? Check out these links:
Twitter: / lihautan
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter
Thanks for watching 🥰 -- with love, Li Hau
