Tooltips & Dropdown Menus with Portals
Use portals to render tooltips and dropdowns that escape overflow-hidden containers.
Welcome
In this lesson you will build tooltip and dropdown components that use React Portals to render in document.body, escaping parent overflow-hidden and z-index stacking context constraints.
The Overflow Problem
A tooltip positioned relative to its trigger button will be clipped if any ancestor has `overflow: hidden` or `overflow: scroll`. Moving the tooltip to document.body via a portal solves this completely.
All lessons in this course
- What Are React Portals?
- Building a Modal Component with Portals
- Handling Focus & Keyboard Traps in Modals
- Tooltips & Dropdown Menus with Portals