Popovers are scattered across a UI without a consistent open/close contract — some use click, others hover or focus, and closing them requires manual DOM hunting and event listener sprawl. A naive implementation forces each feature to rewrite positioning, Z-stacking, outside-click dismiss, and dark-mode tokens, scattering the anchor and content far apart in the tree.

Popover is a controlled-optional compound component pairing Popover.Trigger with Popover.Content. It accepts open and onOpenChange for controlled mode or defaultOpen for uncontrolled; placement options ("top", "bottom", "left", "right", "top-start", "top-end", "bottom-start", "bottom-end") and offset (pixels) control float positioning. The hover prop switches from click to hover interaction; hoverDelay and hoverCloseDelay tune the timing. Trigger and Content both carry stable data-* attributes for queries.

Wrap <Popover open={open} onOpenChange={setOpen}> around <Popover.Trigger> and <Popover.Content> elements. The trigger toggles the popover on click by default; pass hover to switch to hover mode. Popover handles positioning, portal rendering, outside-click dismiss, and escape-key close automatically. Child elements can be any valid React content.