I'm using the native Popover API for UI such as tooltips, comboboxes, and dropdowns. Because an open popover is rendered in the top layer, it can remain visible above a sticky header even after its trigger or anchor has scrolled underneath it. What's the best way to handle this? One idea is to observe the trigger with an IntersectionObserver, using a negative rootMargin matching the sticky header's height, then close the popover when the trigger enters that covered area or is no longer visible. Is dismissing the popover in this situation considered good practice, or should it be repositioned or temporarily hidden instead?
3 Answers
It helps to distinguish between closing and hiding. For a tooltip, closing as soon as its trigger is covered is usually ideal. For a combobox, closing may discard the user’s current interaction, so keeping it open while hiding or repositioning it can provide a better experience. Anchor positioning and fallback positions can move it below the header when there’s room, with dismissal as the fallback when the anchor is completely gone.
Using an IntersectionObserver is a reasonable solution. Treat the area behind the sticky header as unsafe, and call hidePopover() when the anchor leaves the usable content area or the viewport. That’s normal behavior for floating menus and tooltips, not a hack. You can also calculate the header height and expose it through a custom property if you need to adjust the popover’s position dynamically. CSS anchor positioning may help with flipping, depending on browser support.
If you dismiss based on an intersection threshold, add a small delay or debounce so the popover doesn’t flicker when someone scrolls back and forth around the boundary. IntersectionObserver is asynchronous, so very fast scrolling may briefly leave the popover visible over the header, but that’s usually acceptable. If you need more detailed state, a positioning library can distinguish between the reference being hidden and the popover escaping the viewport.
The anchor-visibility features don’t necessarily solve sticky-header overlap. They generally respond to an anchor being clipped by a scroll container or viewport, while a sticky header can simply overlap the anchor without clipping it. You may still need to account for the header’s height yourself.