Popovers

A popover is a small overlay that displays supplemental information to the user. It can contain rich content and is triggered when the UI element it relates to is selected.

Code

Relies on the third-party librarybootstrap.js(4.6)for its features and functionality.View Bootstrap’s popover doc

Popovers

Select a button to view the popover.

Popover Top Popover Right Popover Bottom Popover Left

Toggle dark mode

HTML

<button class="btn btn--brand" type="button" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="…">…</button>

NameAttributeCopy

1. content
   data-content=""
   data-content=""Copy to Clipboard
2. has header
   title=""
   title=""Copy to Clipboard
3. on top
   data-placement=“top”
   data-placement="top"Copy to Clipboard
4. on left
   data-placement=“left”
   data-placement="left"Copy to Clipboard
5. on right
   data-placement=“right”
   data-placement="right"Copy to Clipboard
6. on bottom
   data-placement=“bottom”
   data-placement="bottom"Copy to Clipboard

Twirl

A popover can be invoked using the @standardButton Twirl component.

app/views/components/standardButton.scala.html

@standardButton(
    id = "myId",
    classes = "btn-light",
    text = "Button label",
    popoverPlacement = "top",
    popoverBody = "Sed posuere consectetur est at lob ortis. Aenean eu leo quam." title="Popover header"
)

React

import {Button, Popover, OverlayTrigger} from 'react-p21';

const popover = (
  <Popover id="popover-basic">
    <Popover.Body>Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</Popover.Body>
  </Popover>
);

const Example = () => (
  <OverlayTrigger trigger="click" placement="top" overlay={popover}>
    <Button variant="light">Popover Top</Button>
  </OverlayTrigger>
);

render(<Example />);

In Practice

Use popovers for non-essential information that provides the user with additional guidance or actions.

• Can contain a header, formatted text, links, etc.
• Displaying a popover requires a user action (click, tap, or select via key command).
• Dismissing a popover also requires a user action.
• Be mindful of placement - a popover should not obscure critical elements on the page.

Accessibility

• Popovers should be operable using the keyboard alone.
• Popovers should be announced by screen readers.
• When a popover is opened, focus should be moved to the popover so that keyboard users can interact with it.
• When the popover is closed, focus should be returned to the element that triggered it.

For more information, see our accessibility guidelines.

Design resources

View component in Figma