React Popover Component API

Adds a fade transition animation to the React Popover.

Custom class name(s) for additional styling.

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)

<CPopover container={document.getElementById('my-container')}>...</CPopover>

Main content of the React Popover. It can be a string or any valid React node.

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".

// Delays 300ms on both show and hide
<CPopover delay={300}>...</CPopover>

// Delays 500ms on show and 100ms on hide
<CPopover delay={{ show: 500, hide: 100 }}>...</CPopover>

Specifies the fallback placements when the preferred placement cannot be met.

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

// Offset the menu 0px in X and 10px in Y direction
<CPopover offset={[0, 10]}>...</CPopover>

// Offset the menu 5px in both X and Y direction
<CPopover offset={[5, 5]}>...</CPopover>

Invoked when the React Popover is about to hide.

Invoked when the React Popover is about to show.

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

Allows customization of the Popper.js configuration for the React Popover. Can be an object or a function returning a modified configuration. Learn more

<CPopover
  popperConfig={(defaultConfig) => ({
    ...defaultConfig,
    strategy: 'fixed',
    modifiers: [
      ...defaultConfig.modifiers,
      { name: 'computeStyles', options: { adaptive: false } },
    ],
  })}
>...</CPopover>

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

Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers.

// Hover-only popover
<CPopover trigger="hover">...</CPopover>

// Hover + click combined
<CPopover trigger={['hover', 'click']}>...</CPopover>

Controls the visibility of the React Popover.

• true shows the popover.
• false hides the popover.