Interactive, Anchored, and In the Way of Nothing.

Create a filter popover anchored to a "Filters" button in a table header. The 280px panel holds a "Status" checkbox group with four options and an Apply button, styled with 16px padding, rounded-xl, border and shadow-lg. Position bottom-start with an 8px offset and enable flip and shift collision detection so the panel never leaves the viewport. Open on trigger click with a 150ms scale-fade from the anchor corner, set aria-expanded and aria-controls on the trigger, move focus to the first checkbox on open, and restore focus to the trigger on close. Close on outside pointerdown, on Escape, and on Apply, and show an active-filter count badge on the trigger so state survives the panel being closed. Only one popover open at a time across the header row.

Create a user-card popover that opens on hovering or focusing an avatar in a feed. Delay opening by 200ms and closing by 300ms after the pointer leaves, and keep the panel open while the pointer is over it or the gap between avatar and panel — a closing timeout cancelled by pointerenter on either. Because the card contains interactive buttons, a Follow primary and a Message secondary — it must be a popover, not a tooltip: open also on click and on keyboard focus, set aria-expanded on the trigger, and keep it open while focus is inside the panel. Anchor bottom-start with flip and shift collision handling, render at 288px wide with the avatar, name, role line, and two buttons. Close on Escape and return focus to the trigger.

Create a color picker popover for an editor toolbar. The trigger is a small swatch button showing the currently selected color; clicking it opens a 224px panel with an 8-by-5 grid of 24px rounded color swatches, a "None" option, and a custom hex input at the bottom. Anchor bottom-start with flip and shift collision detection so the grid never clips at the viewport edge. Selecting a swatch applies immediately with no Apply step and closes the panel; the hex input commits on Enter and keeps the panel open while typing. Set aria-expanded on the trigger and give the grid role="listbox" with arrow-key navigation between swatches. Close on outside click and Escape, restore focus to the trigger, and show a checkmark on the currently selected swatch.

Create a two-step destructive-action popover for a "Delete" button in a list row. First click arms it: the button opens a small 240px popover anchored above it containing "Delete this item? This cannot be undone.", a red "Yes, delete" button, and a "Cancel" text button. Confirming deletes the row, shows a toast with an Undo action, and closes the popover; Cancel or any outside click or Escape disarms and returns the row to its normal state, and the button reverts after 4 seconds if untouched. Anchor top-end with flip and shift so the panel stays visible for rows near the bottom of the viewport. Set aria-expanded on the Delete trigger and role="alertdialog" on the panel since it requires a decision, move focus to the "Yes, delete" button on open, and return focus to the trigger on close. No page overlay behind the popover — the surrounding rows stay interactive.