Popover

Popover — Sizes

Popover — alignment

align shifts the popover relative to the trigger along its anchor edge. "start" aligns left, "center" (default) centers, "end" aligns right. Useful for keeping the popover on-screen near viewport edges.

Popover — autocomplete

A typing-driven autocomplete using PopoverAnchor + a controlled open state. The popover width is bound to the input via the --radix-popper-anchor-width CSS var Radix exposes on the anchor. Three behaviours worth noting in the source:

• onOpenAutoFocus={e => e.preventDefault()} keeps the cursor in the input as suggestions appear (default Radix would focus-trap the popover).
• onInteractOutside ignores clicks on the input so typing doesn't dismiss the popover.
• onMouseDown={e => e.preventDefault()} on each suggestion stops the input from blurring on click — focus stays put while the value is selected.

Popover — anchor separate from trigger

PopoverAnchor positions the popover against a different element than the click target. Below, the Edit pencil is the trigger but the popover anchors to the entire row (with align="end") — so the popover stays visually attached to the data it's editing, not the small button that triggered it.