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