Popover

Popovers are small overlays that present additional content without cluttering the page.

Note that from accessibility perspective Popover is treated as a tooltip (the element has role="tooltip") which means that it shouldn't contain interactive elements (e.g, buttons, links, etc.), you can read more about tooltip specifications here. Try using ModalPopup instead if you want Popover's behaviour with interactive elements.

Basic Usage

Show editable code example

Any Paragon component or export may be added to the code example.

<>
  {['top', 'right', 'bottom', 'left'].map((placement) => (
    <OverlayTrigger
      trigger="click"
      key={placement}
      placement={placement}
      overlay={
        <Popover id={`popover-positioned-${placement}`}>
          <Popover.Title as="h3">{`Popover ${placement}`}</Popover.Title>
          <Popover.Content>
            <strong>Holy guacamole!</strong> Check this info.
          </Popover.Content>
        </Popover>
      }
    >
      <Button variant="secondary" className="mr-2 mb-2">Popover on {placement}</Button>
    </OverlayTrigger>
  ))}
</>

<>
  {['top', 'right', 'bottom', 'left'].map((placement) => (
    <OverlayTrigger
      trigger="click"
      key={placement}
      placement={placement}
      overlay={
        <Popover id={`popover-positioned-${placement}`}>
          <Popover.Title as="h3">{`Popover ${placement}`}</Popover.Title>
          <Popover.Content>
            <strong>Holy guacamole!</strong> Check this info.
          </Popover.Content>
        </Popover>
      }
    >
      <Button variant="secondary" className="mr-2 mb-2">Popover on {placement}</Button>
    </OverlayTrigger>
  ))}
</>

State variants

Show editable code example

Any Paragon component or export may be added to the code example.

<>
  <OverlayTrigger
    trigger="click"
    key="top-basic"
    placement="top"
    overlay={
      <Popover className="popover-positioned-top">
        <Popover.Title as="h5">Popover Basic</Popover.Title>
        <Popover.Content>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover.Content>
      </Popover>
    }
  >
    <Button variant="secondary" className="mr-2 mb-2">
      Popover Basic
    </Button>
  </OverlayTrigger>
  <OverlayTrigger
    trigger="click"
    key="top-success"
    placement="top"
    overlay={
      <Popover className="popover-positioned-top" variant="success">
        <Popover.Title as="h5"><Icon src={CheckCircle}/> Popover Success</Popover.Title>
        <Popover.Content>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover.Content>
      </Popover>
    }
  >
    <Button variant="secondary" className="mr-2 mb-2">
      Popover Success
    </Button>
  </OverlayTrigger>
  <OverlayTrigger
    trigger="click"
    key="top-warning"
    placement="top"
    overlay={
      <Popover className="popover-positioned-top" variant="warning">
        <Popover.Title as="h5"><Icon src={WarningFilled} /> Popover Warning</Popover.Title>
        <Popover.Content>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover.Content>
      </Popover>
    }
  >
    <Button variant="secondary" className="mr-2 mb-2">
      Popover Warning
    </Button>
  </OverlayTrigger>
  <OverlayTrigger
    trigger="click"
    key="top-danger"
    placement="top"
    overlay={
      <Popover className="popover-positioned-top" variant="danger">
        <Popover.Title as="h5"><Icon src={Info} /> Popover Danger</Popover.Title>
        <Popover.Content>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover.Content>
      </Popover>
    }
  >
    <Button variant="secondary" className="mr-2 mb-2">
      Popover Danger
    </Button>
  </OverlayTrigger>
</>

<>
  <OverlayTrigger
    trigger="click"
    key="top-basic"
    placement="top"
    overlay={
      <Popover className="popover-positioned-top">
        <Popover.Title as="h5">Popover Basic</Popover.Title>
        <Popover.Content>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover.Content>
      </Popover>
    }
  >
    <Button variant="secondary" className="mr-2 mb-2">
      Popover Basic
    </Button>
  </OverlayTrigger>
  <OverlayTrigger
    trigger="click"
    key="top-success"
    placement="top"
    overlay={
      <Popover className="popover-positioned-top" variant="success">
        <Popover.Title as="h5"><Icon src={CheckCircle}/> Popover Success</Popover.Title>
        <Popover.Content>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover.Content>
      </Popover>
    }
  >
    <Button variant="secondary" className="mr-2 mb-2">
      Popover Success
    </Button>
  </OverlayTrigger>
  <OverlayTrigger
    trigger="click"
    key="top-warning"
    placement="top"
    overlay={
      <Popover className="popover-positioned-top" variant="warning">
        <Popover.Title as="h5"><Icon src={WarningFilled} /> Popover Warning</Popover.Title>
        <Popover.Content>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover.Content>
      </Popover>
    }
  >
    <Button variant="secondary" className="mr-2 mb-2">
      Popover Warning
    </Button>
  </OverlayTrigger>
  <OverlayTrigger
    trigger="click"
    key="top-danger"
    placement="top"
    overlay={
      <Popover className="popover-positioned-top" variant="danger">
        <Popover.Title as="h5"><Icon src={Info} /> Popover Danger</Popover.Title>
        <Popover.Content>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover.Content>
      </Popover>
    }
  >
    <Button variant="secondary" className="mr-2 mb-2">
      Popover Danger
    </Button>
  </OverlayTrigger>
</>

Theme Variables (SCSS)#

$popover-font-size:                  $font-size-sm !default;
$popover-bg:                         $white !default;
$popover-max-width:                  480px !default;
$popover-border-width:               $border-width !default;
$popover-border-color:               rgba($black, .2) !default;
$popover-border-radius:              $border-radius-sm !default;
$popover-inner-border-radius:        subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow:                 drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
$popover-icon-margin-right:          .5rem;
$popover-icon-height:                1rem;
$popover-icon-width:                 1rem;
$popover-header-bg:                  $white !default;
$popover-header-color:               $headings-color !default;
$popover-header-padding-y:           .5rem !default;
$popover-header-padding-x:           1rem !default;
$popover-body-color:                 $body-color !default;
$popover-body-padding-y:             $popover-header-padding-y !default;
$popover-body-padding-x:             $popover-header-padding-x !default;
$popover-arrow-width:                1rem !default;
$popover-arrow-height:               .5rem !default;
$popover-arrow-color:                $popover-bg !default;
$popover-arrow-outer-color:          fade-in($popover-border-color, .05) !default;
$popover-success-bg:                 $success-100 !default;
$popover-success-icon-color:         $success-500 !default;
$popover-warning-bg:                 $warning-100 !default;
$popover-warning-icon-color:         $warning-500 !default;
$popover-danger-bg:                  $danger-100 !default;
$popover-danger-icon-color:          $danger-500 !default;

WrapperPopover Props API

id string Required
An html id attribute, necessary for accessibility.
placement enum'auto' | 'top' | 'bottom' | 'left' | 'right'
Sets the direction the Popover is positioned towards.
This is generally provided by the Overlay component positioning the popover.
Default'right'
title string
When this prop is set, it creates a Popover with a Popover.Title inside passing the children directly to it.
arrowProps shape {
ref: func | shape {
current: element,
},
style: shape {},
}
An Overlay injected set of props for positioning the popover arrow.
This is generally provided by the Overlay component positioning the popover.
content bool
When this prop is set, it creates a Popover with a Popover.Content inside passing the children directly to it.
popper shape {}
A Popper.js config object passed to the the underlying popper instance.
show bool
Whether the Overlay is shown.
children node
Specifies the content of the Overlay
className string
Specifies class name to append to the base element
variant string
The visual style of the Overlay

PopoverTitle Props API

as elementType
Specifies the base element
Default'div'
bsPrefix string
Overrides underlying component base CSS class name
Default'popover-header'

PopoverContent Props API

as elementType
Specifies the base element
Default'div'
bsPrefix string
Overrides underlying component base CSS class name
Default'popover-body'

Usage Insights#

Popover

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	6
frontend-app-learner-portal-enterprise	20.45.4	1
frontend-app-learner-record	20.46.3	1
frontend-app-learning	20.46.0	7
frontend-app-ora-grading	20.46.3	2
frontend-app-support-tools	20.46.0	1
frontend-component-header-edx	21.5.6	1

PopoverContent

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	6
frontend-app-learner-portal-enterprise	20.45.4	1
frontend-app-learner-record	20.46.3	2
frontend-app-learning	20.46.0	7
frontend-app-ora-grading	20.46.3	3
frontend-app-support-tools	20.46.0	1
frontend-component-header-edx	21.5.6	1

PopoverTitle

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.46.3	4
frontend-app-learner-portal-enterprise	20.45.4	1
frontend-app-learner-record	20.46.3	2
frontend-app-support-tools	20.46.0	1
frontend-component-header-edx	21.5.6	1

Edit this page Leave feedback

Paragon Design System

Theme

Popover

Basic Usage

State variants

Theme Variables (SCSS)#

Usage Insights#

Popover

PopoverContent

PopoverTitle

All components (A-Z)

Theme

Popover

Basic Usage#

State variants#

Theme Variables (SCSS)#

Usage Insights#

Popover

PopoverContent

PopoverTitle

All components (A-Z)

Basic Usage

State variants