Vesture
Get started

Overlays

Popover

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

Popover

Preview

Usage

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

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

Behavior

  • Click-triggered, dismissible on Escape/outside click.
  • Controlled (open/onOpenChange) or uncontrolled.
  • role="dialog"; renders through FloatingPortal with a non-modal focus manager.

Props

PropTypeDefaultDescription
contentReactNodeRequired. Panel content.
placementPlacement"bottom-start"Floating UI placement.
openbooleanControlled open state.
onOpenChange(open: boolean) => voidFires on open/close.
childrenReactElementRequired. A single trigger element.