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

<>
  {['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

<>
  <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)#

// Popovers

$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 Required
An html id attribute, necessary for accessibility.
placement enum Required'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 Required
When this prop is set, it creates a Popover with a Popover.Title inside passing the children directly to it.
arrowProps shape Required {
ref: func Required | shape Required {
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 Required
When this prop is set, it creates a Popover with a Popover.Content inside passing the children directly to it.
popper shape Required {}
A Popper.js config object passed to the the underlying popper instance.
show bool Required
Whether the Overlay is shown.
children node Required
Specifies the content of the Overlay
className string Required
Specifies class name to append to the base element
variant string Required
The visual style of the Overlay

PopoverTitle Props API

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

PopoverContent Props API

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

Paragon Design System

Popover

Basic Usage

State variants

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Popover

Basic Usage#

State variants#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

State variants