Popovers

Popovers are components that overlay on top of the interface. Popovers can contain a mix of information. Popovers are used to inform customers about specific content and actions.

Popovers Need Bootstrap JS

This documentation does not currently support Javascript. To use the popovers properly you will need to follow the conventions outlined on the bootstrap manual pages. Bootstrap Popover Documentation ➝

Top

Popover Top

This pop over will position itself at the top of an element.

<!-- This will display by default because of style overrides -->
<div class="popover top" style="display: block; position: relative;">
  <h3 class="popover-title">Popover Top</h3>
  <div class="popover-content">
      <p>This pop over will position itself at the <strong>top</strong> of an element.</p>
  </div>
</div>

Right

Popover Right

This pop over will position itself to the right of an element.

<!-- This will display by default because of style overrides -->
<div class="popover right" style="display: block; position: relative;">
  <h3 class="popover-title">Popover Right</h3>
  <div class="popover-content">
      <p>This pop over will position itself to the <strong>right</strong> of an element.</p>
  </div>
</div>

Bottom

Popover Bottom

This pop over will position itself at the bottom of an element.

<!-- This will display by default because of style overrides -->
<div class="popover bottom" style="display: block; position: relative;">
  <h3 class="popover-title">Popover Bottom</h3>
  <div class="popover-content">
      <p>This pop over will position itself at the <strong>bottom</strong> of an element.</p>
  </div>
</div>

Left

Popover Left

This pop over will position itself to the left of an element.

<!-- This will display by default because of style overrides -->
<div class="popover left" style="display: block; position: relative;">
  <h3 class="popover-title">Popover Left</h3>
  <div class="popover-content">
      <p>This pop over will position itself to the <strong>left</strong> of an element.</p>
  </div>
</div>

Small

Levicorpus

Causes a person to hang upside-down in midair as if hoisted by the ankle

<!-- This will display by default because of style overrides -->
<div class="popover popover--small" style="display: block; position: relative;">
  <h3 class="popover-title">Levicorpus</h3>
  <div class="popover-content">
      <p>Causes a person to hang upside-down in midair as if hoisted by the ankle</p>
  </div>
</div>

Medium

Revelio

A spell to reveal intruders and imposters

<!-- This will display by default because of style overrides -->
<div class="popover popover--medium" style="display: block; position: relative;">
<h3 class="popover-title">Revelio</h3>
<div class="popover-content">
    <p>A spell to reveal intruders and imposters</p>
</div>
</div>

Modal

Wingardium Leviosa

A charm that can levitate things

<!-- This will display by default because of style overrides -->
<div class="popover popover--in-modal" style="display: block; position: relative;">
  <h3 class="popover-title">Wingardium Leviosa</h3>
  <div class="popover-content">
      <p>A charm that can levitate things</p>
  </div>
</div>

Description

This pattern is used when you need to show a popover in a modal. It gives the popover the proper z-indexing to appear on top of a modal.

Do

  • Clearly title popovers when applicable
  • Use clear and concise language

Don't

  • Overlap popovers

Accessibility

  • Doesn’t receive :focus
  • aria-polite
  • Mouse off aria-hidden="true"
  • Mouse over, hover, focus aria-hidden="false"
  • Tooltip Trigger has aria-describedby="popUPID"
  • Tooltip has role="tooltip"