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#

CSS VariableComputed Value










Props API#

Popover Props API

This is a pass through component from React-Bootstrap; see original props documentation here. You can also pass any HTML attributes, such as onClick, role, etc. Which attributes are available depends on whether or not you have overriden the underlying HTML element using the as property.

  • placement unknown type
    Default'right'

Usage Insights#

Popover

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.16
frontend-app-course-authoring22.8.13
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learner-record22.10.01
frontend-app-learning22.10.07
frontend-app-ora-grading21.11.32
frontend-app-support-tools21.13.12
frontend-component-header-edx21.13.11

PopoverContent

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.16
frontend-app-course-authoring22.8.12
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learner-record22.10.02
frontend-app-learning22.10.07
frontend-app-ora-grading21.11.33
frontend-app-support-tools21.13.12
frontend-component-header-edx21.13.11

PopoverTitle

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.14
frontend-app-course-authoring22.8.12
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learner-record22.10.02
frontend-app-support-tools21.13.12
frontend-component-header-edx21.13.11