Tooltips and dropdowns are examples of **floating UI**. They are visually connected to a trigger element but may need to render somewhere else in the DOM to avoid clipping and stacking problems. ### The Clipping Problem Suppose a dropdown exists inside: ```css .card { overflow: hidden; } ``` If the menu extends outside the card, it may be cut off. Conceptually: ```text Card boundary ┌───────────────┐ │ Button │ │ └─ Dropdown │ ← clipped here └───────────────┘ ``` A Portal can render the dropdown under `document.body` while positioning it visually near the trigger. ### Basic Dropdown Structure ```jsx function Dropdown() { const [open, setOpen] = useState(false); const buttonRef = useRef(null); return ( <> {open && ( setOpen(false)} /> )} ); } ``` ### Portal the Menu ```jsx function DropdownMenu({ triggerRef }) { const rect = triggerRef.current?.getBoundingClientRect(); if (!rect) { return null; } return createPortal(

, document.body ); } ``` The DOM exists elsewhere, but the menu visually appears below the button. ### getBoundingClientRect This browser API provides coordinates such as: ```text top bottom left right width height ``` which can help position floating UI relative to its trigger. ### Positioning Is More Complex in Real Applications A robust dropdown or tooltip also needs to handle: ```text Window resizing Scrolling Viewport edges Menu size changes Zoom Nested scroll containers Flipping above/below trigger Collision detection ``` For advanced production interfaces, a dedicated floating-positioning library can be preferable to implementing all of this manually. ### Tooltip Example A tooltip usually has a similar relationship: ```text Trigger element ↓ measure position ↓ render tooltip through Portal ↓ position near trigger ``` ### Tooltip Interaction Matters A tooltip should not normally contain critical information that keyboard or touch users cannot access. Consider: ```text Hover Focus Touch interaction Escape behavior ARIA association ``` for accessible tooltip behavior. ### Dropdowns Need Keyboard Support A production dropdown/menu may need behavior such as: ```text Arrow key navigation Escape to close Focus management Focus returning to trigger Correct ARIA semantics ``` ### Do You Always Need a Portal? No. If a dropdown can render naturally inside its container without clipping or stacking problems, keeping it in place can be simpler. Use a Portal when it solves an actual layout or layering problem. ### Interview-Ready Answer Tooltips and dropdowns often use Portals because floating elements can otherwise be clipped by parent overflow or stacking contexts. The trigger element can be measured with APIs such as `getBoundingClientRect`, and the floating element can be rendered elsewhere while positioned near the trigger. Production implementations must also handle scrolling, viewport collisions, focus, keyboard interaction, and accessibility.