Popover
A popover is an overlay element positioned relative to a trigger.
Preview
Code
Examples
Placement
Preview
Code
Props
Name | Type | Default |
|---|---|---|
showArrow | boolean | — |
className | string | ((values: PopoverRenderProps & { defaultClassName: string; }) => string) | — |
style | CSSProperties | ((values: PopoverRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | — |
slot | string | null | — |
onOpenChange | ((isOpen: boolean) => void) | — |
shouldCloseOnInteractOutside | ((element: Element) => boolean) | — |
isEntering | boolean | — |
isExiting | boolean | — |
UNSTABLE_portalContainer | Element | document.body |
isKeyboardDismissDisabled | boolean | false |
isOpen | boolean | — |
defaultOpen | boolean | — |
trigger | string | — |
placement | Placement | 'bottom' |
containerPadding | number | 12 |
offset | number | 8 |
crossOffset | number | 0 |
shouldFlip | boolean | true |
triggerRef | RefObject<Element | null> | — |
boundaryElement | Element | document.body |
scrollRef | RefObject<Element | null> | overlayRef |
shouldUpdatePosition | boolean | true |
maxHeight | number | — |
arrowBoundaryOffset | number | 0 |
isNonModal | boolean | — |