Theme

npm_versionnpm Paragon package page

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

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

State variants

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

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;

Props API#

Popover Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

  • 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 NameParagon VersionInstance Count
frontend-app-admin-portal21.13.17
frontend-app-course-authoring22.4.03
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learner-record22.6.01
frontend-app-learning22.3.07
frontend-app-ora-grading21.11.32
frontend-app-support-tools20.46.01
frontend-component-header-edx21.11.41

PopoverContent

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.17
frontend-app-course-authoring22.4.02
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learner-record22.6.02
frontend-app-learning22.3.07
frontend-app-ora-grading21.11.33
frontend-app-support-tools20.46.01
frontend-component-header-edx21.11.41

PopoverTitle

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.15
frontend-app-course-authoring22.4.02
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learner-record22.6.02
frontend-app-support-tools20.46.01
frontend-component-header-edx21.11.41