Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
Give us a star ⭐️ on Github.

React Popover Component

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

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

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>

Customizing#

CSS variables#

React popovers use local CSS variables on .popover for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

1--cui-popover-zindex: #{$zindex-popover};
2--cui-popover-max-width: #{$popover-max-width};
3--cui-popover-font-size: {$popover-font-size};
4--cui-popover-bg: #{$popover-bg};
5--cui-popover-border-width: #{$popover-border-width};
6--cui-popover-border-color: #{$popover-border-color};
7--cui-popover-border-radius: #{$popover-border-radius};
8--cui-popover-inner-border-radius: #{$popover-inner-border-radius};
9--cui-popover-box-shadow: #{$popover-box-shadow};
10--cui-popover-header-padding-x: #{$popover-header-padding-x};
11--cui-popover-header-padding-y: #{$popover-header-padding-y};
12--cui-popover-header-font-size: {$popover-header-font-size};
13--cui-popover-header-color: #{$popover-header-color};
14--cui-popover-header-bg: #{$popover-header-bg};
15--cui-popover-body-padding-x: #{$popover-body-padding-x};
16--cui-popover-body-padding-y: #{$popover-body-padding-y};
17--cui-popover-body-color: #{$popover-body-color};
18--cui-popover-arrow-width: #{$popover-arrow-width};
19--cui-popover-arrow-height: #{$popover-arrow-height};
20--cui-popover-arrow-border: var(--cui-popover-border-color);

How to use CSS variables#

1const vars = { 
2  '--my-css-var': 10,
3  '--my-another-css-var': "red" 
4}
5return <CPopover style={vars}>...</CPopover>

SASS variables#

1$popover-font-size:                 $font-size-sm;
2$popover-bg:                        $white;
3$popover-max-width:                 276px;
4$popover-border-width:              $border-width;
5$popover-border-color:              var(--cui-border-color-translucent);
6$popover-border-radius:             $border-radius-lg;
7$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
8$popover-box-shadow:                $box-shadow;
9
10$popover-header-font-size:          $font-size-base;
11$popover-header-bg:                 shade-color($popover-bg, 6%);
12$popover-header-color:              var(--cui-heading-color);
13$popover-header-padding-y:          .5rem;
14$popover-header-padding-x:          $spacer;
15
16$popover-body-color:                $body-color;
17$popover-body-padding-y:            $spacer;
18$popover-body-padding-x:            $spacer;
19
20$popover-arrow-width:               1rem;
21$popover-arrow-height:              .5rem;

API#

CPopover#

1import { CPopover } from '@coreui/react'
2// or
3import CPopover from '@coreui/react/src/components/popover/CPopover'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
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`	-

On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.