I'm using the native Popover API for tooltips, comboboxes, dropdowns, and similar components. 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? I'm considering an IntersectionObserver with a negative top rootMargin matching the header height, then closing the popover when the anchor enters that covered area or is no longer visible. Is programmatically closing it in this situation good practice, or should the popover be repositioned or temporarily hidden instead?
3 Answers
CSS anchor positioning can help flip the popover to another side when the original placement is blocked, but anchor visibility rules generally detect clipping by a scroll container or viewport—not necessarily visual overlap from a sticky header. You’ll probably still need to account for the header height yourself, perhaps through a custom property or an observer. Don’t try to solve this with z-index: top-layer elements intentionally sit above ordinary sticky content. The practical choices are to reposition the popover, hide it, or dismiss it depending on the component.
Separate closing from hiding or repositioning based on the component. For a tooltip, dismissing it as soon as the trigger is covered is usually the best experience. For a combobox or select, the user may already have entered text or made a selection, so closing can be disruptive. In that case, keep it open if possible and reposition it below or beside the header, then close it only when the anchor has fully left the viewport or there’s no safe placement.
It’s reasonable to close the popover when its anchor leaves the usable content area. An IntersectionObserver with a negative top rootMargin matching the sticky header height can detect that condition, then you can call hidePopover(). This is especially appropriate for tooltips and transient menus. A small delay or debounce can prevent flicker when the user scrolls back and forth right around the threshold.
IntersectionObserver works for this, but it reacts asynchronously, so very fast scrolling may show the popover over the header for a frame or two. If that delay matters, a positioning library with visibility or escape detection can expose separate states for an anchor that is hidden versus a popover that has escaped its safe area.