React Popover Component API

Popover API

Explore the API reference for the React Popover component and discover how to effectively utilize its props for customization.

On this page

CPopover

jsx
import { CPopover } from '@coreui/react-pro'
PropertyDefaultType
animation4.9.0+trueboolean, undefined

Adds a fade transition animation to the React Popover.

className-string, undefined

Custom class name(s) for additional styling.

container4.11.0+document.bodyElement, DocumentFragment, (() => Element | DocumentFragment | null), null, undefined

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.

delay4.9.0+-number, { show: number; hide: number; }, undefined

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.

offset[0, 8][number, number], undefined

Offset of the React Popover relative to its toggle element, in the form [x, y].

onHide-(() => void), undefined

Invoked when the React Popover is about to hide.

onShow-(() => void), undefined

Invoked when the React Popover is about to show.

placementtop'auto', 'top', 'bottom', 'right', 'left', undefined

Placement of the React Popover. Popper.js may override this based on available space.

popperConfig5.5.0+-Partial<Options>, ((defaultPopperConfig: Partial<Options>) => Partial<Options>), undefined

Allows customization of the Popper.js configuration for the React Popover. Can be an object or a function returning a modified configuration. [Learn more](https://popper.js.org/docs/v2/constructors/#options)

title-ReactNode

Title for the React Popover header. Can be a string or any valid React node.

triggerclick'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.

visible-boolean, undefined

Controls the visibility of the React Popover. - true shows the popover. - false hides the popover.