React Popover Component

Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.

Example#

1<CPopover
2 title="Popover title"
3 content="And here’s some amazing content. It’s very engaging. Right?"
4 placement="right"
5>
6 <CButton color="danger" size="lg">
7 Click to toggle popover
8 </CButton>
9</CPopover>

Four directions#

Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for React in RTL.

1<CPopover
2 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
3 placement="top"
4 >
5 <CButton color="secondary">Popover on top</CButton>
6 </CPopover>
7 <CPopover
8 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
9 placement="right"
10 >
11 <CButton color="secondary">Popover on right</CButton>
12 </CPopover>
13 <CPopover
14 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
15 placement="bottom"
16 >
17 <CButton color="secondary">Popover on bottom</CButton>
18 </CPopover>
19 <CPopover
20 content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
21 placement="left"
22 >
23 <CButton color="secondary">Popover on left</CButton>
24 </CPopover>

API#

CPopover#

1import { CPopover } from '@coreui/react'
2// or
3import CPopover from '@coreui/react/src/components/popover/CPopover'
PropertyDescriptionTypeDefault
contentContent node for your component.ReactNode-
offsetOffset of the popover relative to its target.[number, number][0, 8]
onHideCallback fired when the component requests to be hidden.() => void-
onShowCallback fired when the component requests to be shown.() => void-
placementDescribes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.'auto' | 'top' | 'right' | 'bottom' | 'left'top
titleTitle node for your component.ReactNode-
triggerSets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.'hover' | 'focus' | 'click'click
visibleToggle the visibility of popover component.boolean-