Popover

Popover is a self-contained modal or dialogue that appears in context next to a trigger element.

Overview

A popover is a self-contained modal or dialogue that appears in context next to a trigger element. It contains more content than a tooltip, but is directly related to a trigger element in the same way as a tooltip.

Hover on meThe Panel Component.

Anatomy

TriggerContainerHover on meThe Panel Component.12
  1. Trigger. This element triggers the Popover container to appear. It also anchors the Popover, so it will display beside the trigger.

  2. Popover container. Much like the Card component, the Popover container accepts content and components. Its layout is dictated by the content it is displaying.

    Sizing and Spacing

    Whilst the size of the popover should be dictated by its content, try to limit the overall size of the component. It should be there to provide additional context, not as a way to inline functionality that should either be a standalone page, or an actual modal/dialog.

    Hierarchy & Placement

    Only one Popover can be active on a page at a time.

A popover is a self-contained modal or dialogue that appears in context next to a trigger element. It contains more content than a tooltip, but is directly related to a trigger element in the same way as a tooltip.

Basic Usage

Hover on me!
<Popover
  placement="left"
  content={
    <div style={{ padding: '1rem' }}>This is some arbitrary JSX</div>
  }
>
  <div
    style={{
      display: 'inline-block',
      padding: '1rem',
      backgroundColor: '#c9c9c9',
    }}
  >
    Hover on me!
  </div>
</Popover>

Popover Properties

NameTypeRequiredDefaultDescription
classNamestringFalsen/aCustom CSS class to add to the Popover element.
contentReact.ReactElementFalsen/aArbitrary JSX to be rendered within the popover on hover.
scheme"dark"|"light"False"light"The colour scheme to apply to the popover.
placement"above"|"below"|"left"|"right"Truen/aWhere to position the popover in relation to the target element.