PopoverProps

Name	Type	Default	Description
anchor?	"null" | HTMLElement		Specifies the element to be used as the anchor for the Popover. The Popover opens relative to this element. jsx <Popover anchor={document.getElementById('anchor')} />
animate?	boolean | PopoverAnimation		Configures the animation behavior of the Popover. Accepts a boolean or a configuration object. jsx <Popover animate={true} />
appendTo?	"null" | HTMLElement		Defines the container to which the Popover will be appended. Defaults to body. If set to null, the Popover will not use React Portal. jsx <Popover appendTo={document.getElementById('container')} />
callout?	boolean		Controls the visibility of the Popover callout (arrow). If set to false, the callout will not be rendered. jsx <Popover callout={false} />
children?	React.ReactNode		Specifies the children elements of the Popover. Used to define the content of the Popover. jsx <Popover> <div>Popover Content</div> </Popover>
className?	string | string[]		Specifies additional CSS classes for the Popover element. jsx <Popover className="custom-class" />
collision?	PopoverCollision		Configures the collision behavior of the Popover. Determines how the Popover adjusts its position when it overflows the viewport. jsx <Popover collision={{ horizontal: 'fit', vertical: 'flip' }} />
contentStyle?	React.CSSProperties		Specifies the styles applied to the content element of the Popover. jsx <Popover contentStyle={{ padding: '10px' }} />
id?	string		Specifies the id attribute for the Popover element. jsx <Popover id="popover-id" />
margin?	PopoverMargin		Specifies the margin in pixels between the Popover and the anchor element. Automatically set based on the position property if not specified. jsx <Popover margin={{ top: 10, left: 5 }} />
offset?	PopoverOffset		Specifies the absolute position of the Popover. The Popover opens relative to this point. jsx <Popover offset={{ top: 100, left: 200 }} />
onClose?	(event: PopoverCloseEvent) => void		Fires after the Popover is closed. Provides the event details. jsx <Popover onClose={(event) => console.log('Popover closed', event)} />
onKeyDown?	(event: PopoverKeyDownEvent) => void		Fires when the Popover is focused and a key is pressed. Provides the event details. jsx <Popover onKeyDown={(event) => console.log('Key pressed', event)} />
onOpen?	(event: PopoverOpenEvent) => void		Fires after the Popover is opened and the opening animation ends. Provides the event details. jsx <Popover onOpen={(event) => console.log('Popover opened', event)} />
onPosition?	(event: PopoverPositionEvent) => void		Fires after the Popover position is calculated and set. Provides the event details. jsx <Popover onPosition={(event) => console.log('Popover positioned', event)} />
popoverClass?	string | string[] | {[key: string]: boolean}		Specifies additional CSS classes for the animated Popover element. jsx <Popover popoverClass="custom-popover-class" />
position?	PopoverPosition		Specifies the position of the Popover relative to the anchor or offset. Accepts predefined position values. jsx <Popover position="top" />
positionMode?	PositionMode		Specifies the positioning mode of the Popover. Defaults to fixed. Use absolute for mobile browser support with zoom. jsx <Popover positionMode="absolute" />
scale?	number		Specifies the document scale when using a scale transform. Required for accurate positioning when scaling is applied. jsx <Popover scale={1.5} />
show?	boolean		Controls the visibility of the Popover. Defaults to false. jsx <Popover show={true} />
style?	React.CSSProperties		Specifies the styles applied to the Popover element. jsx <Popover style={{ backgroundColor: 'blue' }} />
title?	React.ReactNode		Specifies the title of the Popover component. Can be a string or JSX content. jsx <Popover title="Popover Title" />