Overlays

Popover

A click-triggered panel anchored to a trigger element — for richer content than a Tooltip supports.

Popover

Preview

Scroll behavior — onAnchorScroll

tsx

import { Popover, Button } from "@vesture/react";

<Popover content={<div>Extra details here.</div>}>
  <Button>Info</Button>
</Popover>

Click-triggered, dismissible on Escape/outside click.
Controlled (open/onOpenChange) or uncontrolled.
role="dialog"; renders through FloatingPortal with a non-modal focus manager.
Stays anchored while any scrollable ancestor of the trigger scrolls — tracked via Floating UI's autoUpdate.
Fades out gracefully (no unmount, so position tracking isn't reset) once the anchor scrolls fully out of view, instead of hanging in a stale position.
Choose what happens on ancestor scroll via onAnchorScroll: "follow" (default) keeps tracking the anchor, "close" dismisses the popover on the first scroll instead.

Prop	Type	Default	Description
content	ReactNode	—	Required. Panel content.
placement	Placement	"bottom-start"	Floating UI placement.
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean) => void	—	Fires on open/close.
onAnchorScroll	"follow" \| "close"	"follow"	Behavior when the anchor's scroll container scrolls. "follow" keeps the popover pinned to the anchor, hiding it gracefully once fully out of view. "close" dismisses the popover on the first scroll.
children	ReactElement	—	Required. A single trigger element.