React Popover Component API
Popover API
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Explore the API reference for the React Popover component and discover how to effectively utilize its props for customization.
CPopover#
import { CPopover } from '@coreui/react'// orimport CPopover from '@coreui/react/src/components/popover/CPopover'| Property | Default | Type |
|---|---|---|
| animation#4.9.0+ | true | boolean |
Apply a CSS fade transition to the popover. | ||
| className# | - | string |
A string of all className you want applied to the component. | ||
| container#4.11.0+ | - | Element, DocumentFragment, (() => Element | DocumentFragment) |
Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default | ||
| content# | - | ReactNode |
Content node for your component. | ||
| delay#4.9.0+ | 0 | number, { show: number; hide: number; } |
The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: | ||
| fallbackPlacements#4.9.0+ | ['top', 'right', 'bottom', 'left'] | Placements, Placements[] |
Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | ||
| offset# | [0, 8] | [number, number] |
Offset of the popover relative to its target. | ||
| onHide# | - | () => void |
Callback fired when the component requests to be hidden. | ||
| onShow# | - | () => void |
Callback fired when the component requests to be shown. | ||
| placement# | top | 'auto', 'top', 'bottom', 'right', 'left' |
Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | ||
| title# | - | ReactNode |
Title node for your component. | ||
| trigger# | click | 'hover', 'focus', 'click' |
Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | ||
| visible# | - | boolean |
Toggle the visibility of popover component. | ||