Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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

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(0 2px 4px rgb(0 0 0 / 15%))
  drop-shadow(0 2px 8px rgb(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'

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)