Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Popover

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

Basic Usage

State variants

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(0px 2px 4px rgba(0, 0, 0, 0.15)) drop-shadow(0px 2px 8px rgba(0, 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: object,
    }

    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
    any

    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'

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)