Bootstrap React Popover

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

On this page

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 Bootstrap 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/bootstrap-react'
2// or
3import CPopover from '@coreui/bootstrap-react/src/components/popover/CPopover'

Property	Description	Type	Default
content	Content node for your component.	`ReactNode`	-
offset	Offset of the popover relative to its target.	`[number, number]`	[0, 8]
onHide	Callback fired when the component requests to be hidden.	`() => void`	-
onShow	Callback fired when the component requests to be shown.	`() => void`	-
placement	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.	`'auto'` \| `'top'` \| `'right'` \| `'bottom'` \| `'left'`	top
title	Title node for your component.	`ReactNode`	-
trigger	Sets 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
visible	Toggle the visibility of popover component.	`boolean`	-