Popover

Displays detailed information in a popover.

Usage

Used to show contextual information anchored to a trigger element.

import { Popover, Portal, Surface, Button } from "@elemnts-ui/react";

<Popover.Root>
  <Popover.Trigger asChild>
    <Button>Open Popover</Button>
  </Popover.Trigger>
  <Portal>
    <Popover.Positioner>
      <Popover.Content asChild>
        <Surface w="18rem">
          <Surface.Content>
            <Popover.Title>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
            <Popover.CloseTrigger>Close</Popover.CloseTrigger>
          </Surface.Content>
        </Surface>
      </Popover.Content>
    </Popover.Positioner>
  </Portal>
</Popover.Root>;

Same width

Enable the positioning.sameWidth prop to have the popover content match the trigger’s width.

API Reference

The root component

Prop	Type	Default
asChild	`boolean`	`false`
autoFocus	`boolean`	`true`
closeOnEscape	`boolean`	`true`
closeOnInteractOutside	`boolean`	`true`
defaultOpen	`boolean`	-
defaultTriggerValue	`string`	-
finalFocusEl	`() => MaybeElement`	-
hideMode	`HideMode`	`'display-none'`
id	`string`	-
ids	`Partial<{ anchor: string; trigger: string \| ((value?: string \| undefined) => string); content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }>`	-
immediate	`boolean`	-
initialFocusEl	`() => HTMLElement	null`
lazyMount	`boolean`	`false`
modal	`boolean`	`false`
onEscapeKeyDown	`(event: KeyboardEvent) => void`	-
onExitComplete	`VoidFunction`	-
onFocusOutside	`(event: FocusOutsideEvent) => void`	-
onInteractOutside	`(event: InteractOutsideEvent) => void`	-
onOpenChange	`(details: OpenChangeDetails) => void`	-
onPointerDownOutside	`(event: PointerDownOutsideEvent) => void`	-
onRequestDismiss	`(event: LayerDismissEvent) => void`	-
onTriggerValueChange	`(details: TriggerValueChangeDetails) => void`	-
open	`boolean`	-
portalled	`boolean`	`true`
positioning	`PositioningOptions`	-
present	`boolean`	-
restoreFocus	`boolean`	`true`
skipAnimationOnMount	`boolean`	`false`
translations	`IntlTranslations`	-
triggerValue	`string`	-
unmountOnExit	`boolean`	`false`
persistentElements	`(() => Element	null)[]`