CSS
Menu

Popover

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

Table of Contents

A popover consist of:

  • The block element, .Popover, which simply positions its content absolutely atop other body content.
  • The child element, .Popover-message, which contains the markup for the intended messaging and the visual “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, most of which position the caret differently:

Each of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:

Lastly, there is an added .Popover-message--large modifier, which assumes a slightly wider popover message 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.

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

Edit this page on GitHub