Popover

A floating container that displays additional content when triggered.

Usage

import { Popover } from '@ivaldi/ui'

Popover.Composed Props

PropTypeDefault
content*ReactNode—
contentPropsPopoverContentProps"{}"
panelPropsany"{}"
arrowboolean"true"
classNamestring—
childrenReactNode—
openboolean—
defaultOpenboolean—
onOpenChangefunction—
modalboolean—
CSS VariableDescription
--popover-width

Width of the popover viewport.

--popover-height

Height of the popover viewport.

Popover.Root Props

PropTypeDefault
childrenReactNode—
openboolean—
defaultOpenboolean—
onOpenChangefunction—
modalboolean—

Popover.Anchor Props

PropTypeDefault
classNamestring—
childrenReactNode—
asChildboolean—
virtualRefRefObject<Measurable>—

Popover.Close Props

PropTypeDefault
typeenum—
classNamestring—
childrenReactNode—
asChildboolean—

Popover.Content Props

PropTypeDefault
panelPropsany"{}"
arrowboolean—
forceMounttrue—
classNamestring—
childrenReactNode—
asChildboolean—
sideenum—
sideOffsetnumber"4"
alignenum—
alignOffsetnumber—
arrowPaddingnumber—
avoidCollisionsboolean—
collisionBoundaryElement | Element[]—
collisionPaddingsee more—
stickyenum—
hideWhenDetachedboolean—
updatePositionStrategyenum—
onEscapeKeyDownfunction—
onPointerDownOutsidefunction—
onFocusOutsidefunction—
onInteractOutsidefunction—
onOpenAutoFocusfunction—
onCloseAutoFocusfunction—
CSS VariableDescription
--popover-width

Width of the popover viewport.

--popover-height

Height of the popover viewport.

Popover.Trigger Props

PropTypeDefault
typeenum—
classNamestring—
childrenReactNode—
asChildboolean—