Popover
A small floating panel anchored to the button that opened it, holding real content and controls.
See it
What it is
A popover is a small floating surface that hangs off the control that opened it, usually with a little arrow pointing back at that control. It holds real content: a form, a color picker, a profile summary, a set of settings. It sits between a tooltip (hover, text only, no interaction) and a modal dialog (blocking, centered, page-owning). The rest of the page stays live behind it.
Open it on click, not hover, whenever there is anything inside worth clicking. Close it on outside click, on Escape, and on selecting something; return focus to the trigger. Two anchors do the heavy lifting on the web: Floating UI (the successor to Popper) for the placement math, and the native popover attribute plus CSS anchor positioning, which put the panel in the browser's top layer with no z-index negotiation at all.
Gotcha: positioning is where popovers die. An ancestor with overflow: hidden clips it, a transformed ancestor breaks fixed positioning, and a stacking context somewhere up the tree beats any z-index you pick. That's why libraries portal the panel to the body or use the top layer, then flip and shift it to stay in the viewport. Second trap: hover-triggered popovers with buttons inside. The pointer has to cross a gap to reach them, so you need a hover-intent delay or a 'safe triangle', otherwise the panel vanishes mid-reach.
Ask AI for it
Build a popover anchored to a trigger button using Floating UI: placement 'bottom-start' with an 8px offset, flip and shift middleware so it stays in the viewport, and a small arrow pointing at the trigger. Style it as a card: white (dark grey in dark mode), 1px border, 8px radius, medium shadow, 16px padding, max-width 20rem. Portal it to the body so ancestor overflow can't clip it. Open on click, close on outside click and Escape, move focus into the panel on open and back to the trigger on close, and wire aria-expanded plus aria-controls on the trigger. Animate with a 120ms fade and a 4px slide from the trigger's direction.