React Popover Component

Popover

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.

On this page

Examples#

Live demo#

<CPopover
  title="Popover title"
  content="And here’s some amazing content. It’s very engaging. Right?"
  placement="right"
>
  <CButton color="danger" size="lg">Click to toggle popover</CButton>
</CPopover>

Four directions#

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

<CPopover
    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    placement="top"
  >
    <CButton color="secondary">Popover on top</CButton>
  </CPopover>
  <CPopover
    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    placement="right"
  >
    <CButton color="secondary">Popover on right</CButton>
  </CPopover>
  <CPopover
    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    placement="bottom"
  >
    <CButton color="secondary">Popover on bottom</CButton>
  </CPopover>
  <CPopover
    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    placement="left"
  >
    <CButton color="secondary">Popover on left</CButton>
  </CPopover>

Custom popovers#

You can customize the appearance of popovers using CSS variables. We set a custom style to scope our custom appearance and use it to override some of the local CSS variables.

const customPopoverStyle = {
  '--cui-popover-max-width': '200px',
  '--cui-popover-border-color': 'var(--cui-primary)',
  '--cui-popover-header-bg': 'var(--cui-primary)',
  '--cui-popover-header-color': 'var(--cui-white)',
  '--cui-popover-body-padding-x': '1rem',
  '--cui-popover-body-padding-y': '.5rem',
}
return (
  <CPopover
    content="This popover is themed via CSS variables."
    placement="right"
    title="Custom popover"
    style={customPopoverStyle}
  >
    <CButton color="secondary">Custom popover</CButton>
  </CPopover>
)

Dismiss on next click#

Use the focus trigger to dismiss popovers on the user's next click of a different element than the toggle element.

<CPopover
  content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
  placement="right"
  title="Dismissible popover"
  trigger="focus"
>
  <CButton color="danger">Dismissible popover</CButton>
</CPopover>

Usage#

Disabled elements#

Elements with the disabled attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".

For disabled popover triggers, you may also prefer trigger={['hover', 'focus']} so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

<CPopover
  content="Disabled popover"
  placement="right"
  trigger={['hover', 'focus']}
>
  <span className="d-inline-block" tabIndex={0}>
    <CButton color="primary" disabled>Disabled button</CButton>
  </span>
</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.

--cui-popover-zindex: #{$zindex-popover};
--cui-popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --cui-popover-font-size);
--cui-popover-bg: #{$popover-bg};
--cui-popover-border-width: #{$popover-border-width};
--cui-popover-border-color: #{$popover-border-color};
--cui-popover-border-radius: #{$popover-border-radius};
--cui-popover-inner-border-radius: #{$popover-inner-border-radius};
--cui-popover-box-shadow: #{$popover-box-shadow};
--cui-popover-header-padding-x: #{$popover-header-padding-x};
--cui-popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --cui-popover-header-font-size);
--cui-popover-header-color: #{$popover-header-color};
--cui-popover-header-bg: #{$popover-header-bg};
--cui-popover-body-padding-x: #{$popover-body-padding-x};
--cui-popover-body-padding-y: #{$popover-body-padding-y};
--cui-popover-body-color: #{$popover-body-color};
--cui-popover-arrow-width: #{$popover-arrow-width};
--cui-popover-arrow-height: #{$popover-arrow-height};
--cui-popover-arrow-border: var(--cui-popover-border-color);

How to use CSS variables#

const vars = {
  '--my-css-var': 10,
  '--my-another-css-var': 'red',
}
return <CPopover style={vars}>...</CPopover>

SASS variables#

$popover-font-size:                 $font-size-sm !default;
$popover-bg:                        var(--cui-body-bg) !default;
$popover-max-width:                 276px !default;
$popover-border-width:              var(--cui-border-width) !default;
$popover-border-color:              var(--cui-border-color-translucent) !default;
$popover-border-radius:             var(--cui-border-radius-lg) !default;
$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow:                var(--cui-box-shadow) !default;

$popover-header-font-size:          $font-size-base !default;
$popover-header-bg:                 var(--cui-secondary-bg) !default;
$popover-header-color:              $headings-color !default;
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          $spacer !default;

$popover-body-color:                var(--cui-body-color) !default;
$popover-body-padding-y:            $spacer !default;
$popover-body-padding-x:            $spacer !default;

$popover-arrow-width:               1rem !default;
$popover-arrow-height:              .5rem !default;

API#

CPopover#

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

Property	Description	Type	Default
animation 4.9.0+	Apply a CSS fade transition to the popover.	`boolean`	true
className	A string of all className you want applied to the component.	`string`	-
container 4.11.0+	Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.	`Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)`	-
content	Content node for your component.	`ReactNode`	-
delay 4.9.0+	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: `{ 'show': 500, 'hide': 100 }`.	`number` \| `{ show: number; hide: number; }`	0
fallbackPlacements 4.9.0+	Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.	`Placements` \| `Placements[]`	['top', 'right', 'bottom', 'left']
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'` \| `'bottom'` \| `'right'` \| `'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`	-