Popover()function

Popover({
	children: [trigger, ...popover], //
	onClose,
	open = popover.flat().some(isTruthy),
}: PopoverProps): ReactElement
ParamType
propsPopoverProps
Props for Popover, a trigger element that reveals floating content. required
    .childrenPopoverChildren
Children for the popover. required
    .onCloseCallback
Callback that gets called when the Popover closes.
    .openboolean
Whether the popover is open/closed (defaults to whether all popoverChildren nodes has at least one truthy node).
Return
ReactElement
A wrapper element containing the trigger and (when open) the popover panel.

Trigger element that reveals a floating popover panel beside it when active or focused.

  • The first children node is the trigger; the rest become the popover contents.
  • Closes on blur away or Escape, calling onClose.

@todo DH: Would love to use new HTML popover="auto" functionality for this but the anchor positioning it needs is not supported everywhere yet.

Examples

<Popover>{trigger}{panelContent}</Popover>