| animation4.9.0+ | true | boolean |
Adds a fade transition animation to the React Popover. |
| className | - | string |
Custom class name(s) for additional styling. |
| container4.11.0+ | document.body | Element, DocumentFragment, (() => Element | DocumentFragment | null), null |
Defines the container element to which the React Popover is appended. Accepts: - A DOM element (HTMLElement or DocumentFragment) - A function that returns a single element - null (defaults to document.body) |
| content | - | ReactNode |
Main content of the React Popover. It can be a string or any valid React node. |
| defaultShow6.0.0+ | - | boolean |
The initial visibility of an uncontrolled React Popover — read once on mount. |
| delay4.9.0+ | - | number, { show: number; hide: number; } |
Delay (in milliseconds) before showing or hiding the React Popover. - If a number is provided, that delay applies to both "show" and "hide". - If an object is provided, use separate values for "show" and "hide". |
| fallbackPlacements4.9.0+ | ['top', 'right', 'bottom', 'left'] | 'top', 'right', 'bottom', 'left', ('top', 'right', 'bottom', 'left')[] |
Specifies the fallback placements when the preferred placement cannot be met. |
| floatingConfig5.5.0+ | - | Partial<ComputePositionConfig>, ((defaultFloatingConfig: Partial<ComputePositionConfig>) => Partial<ComputePositionConfig>) |
Allows customization of the Floating UI configuration for the React Popover. Can be an object or a function returning a modified configuration. [Learn more](https://floating-ui.com/docs/computePosition#options) |
| offset | [0, 8] | [number, number] |
Offset of the React Popover relative to its toggle element, in the form [x, y]. |
| onHidden6.0.0+ | - | (() => void) |
Callback fired when the React Popover has finished its exit transition. |
| onHide | - | (() => void) |
Callback fired when the React Popover starts hiding. |
| onShow | - | (() => void) |
Callback fired when the React Popover starts showing. |
| onShowChange6.0.0+ | - | ((show: boolean) => void) |
Callback fired when the React Popover requests a visibility change — a trigger gesture (hover, focus, click), the Escape key or, in uncontrolled mode, any internal toggle. In controlled mode update show yourself, or the popover stays as it is. |
| onShown6.0.0+ | - | (() => void) |
Callback fired when the React Popover has finished its entry transition. |
| placement | top | 'auto', 'top', 'bottom', 'right', 'left', 'end', 'start', (string & {}) |
Placement of the React Popover. Floating UI may override this based on available space. start and end are logical: they follow the reading direction, so end is the right side in LTR and the left side in RTL. left and right are their deprecated spellings and resolve identically. |
| show6.0.0+ | - | boolean |
Control the visibility. When set, the React Popover renders what show says (delays still apply as presentation) and trigger gestures only call onShowChange — nothing changes until the parent flips the prop. |
| title | - | ReactNode |
Title for the React Popover header. Can be a string or any valid React node. |
| trigger | click | 'hover', 'focus', 'click', ('hover' | 'focus' | 'click')[] |
Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers. |
| visibleDeprecated 6.0.0 | - | boolean |
Controls the visibility of the React Popover. - true shows the popover. - false hides the popover. Use defaultShow / show / onShowChange instead — visible is ignored when either of them is set. |