Skip to content

Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.

ClassDescription
PopoverBlock element, position absolute
Popover-messageChild element, content and caret

In the examples below, Popover-message, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.

The Popover-message element also supports several modifiers. By default, the caret is shown on the top edge of the message, horizontally centered. To change the caret's position, use one of the following modifiers.

Variants

ClassDescription
Popover-message--bottomCaret bottom
Popover-message--rightCaret right
Popover-message--leftCaret left
Popover-message--bottom-leftCaret bottom left
Popover-message--bottom-rightCaret bottom right
Popover-message--left-bottomCaret left bottom
Popover-message--left-topCaret left top
Popover-message--right-bottomCaret right bottom
Popover-message--right-topCaret right top
Popover-message--top-leftCaret top left
Popover-message--top-rightCaret top right
Popover-message--largeLarger width on screens wider than 544px

Notes

The samples below include optional markup, like:

  • An outermost container that establishes stacking context (e.g. position-relative).
  • A choice piece of user interface (a button, in this case) to relate the popover to.
  • Use of the Details and js-details family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested "Got it!" button.

For screen sizes smaller than 767px, Popover will appear full-width and without a caret.

Basic example

Defaults to caret oriented top-center.

Large example

Bottom

Bottom-right

Bottom-left

Left

Left-bottom

Left-top

Right-bottom

Right-top

Top-left

Top-right