---
title: React Popover Component
name: Popover
description: Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.
menu: Components
route: /components/popover
other_frameworks: popover
---

import { CPopover, CButton } from '@coreui/react/src/index'

## Examples

### Live demo

<Example>
  <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>
</Example>

```jsx
<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.

<Example>
  <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>
</Example>

```jsx
  <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](#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.

export const CustomPopoversExample = () => {
  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>
  )
}

<Example>
  <CustomPopoversExample />
</Example>
```jsx
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.

<Example>
  <CPopover
    content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    placement="right"
    title="Dismissible popover"
    trigger="focus"
  >
    <CButton color="danger">Dismissible popover</CButton>
  </CPopover>
</Example>
```jsx
<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.

<Example>
  <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>
</Example>
```jsx
<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.

<ScssDocs file="_popover.scss" capture="popover-css-vars"/>

#### How to use CSS variables

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

### SASS variables

<ScssDocs file="_variables.scss" capture="popover-variables"/>

## API

### CPopover

`markdown:CPopover.api.mdx`
