Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
A popover consist of:
.Popover, which simply positions its content absolutely atop other body content.
.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.
Popover-message element also supports several modifiers, most of which position the caret differently:
.Popover-message--top(default): Places the caret on the top edge of the message, horizontally centered.
.Popover-message--bottomPlaces the caret on the bottom edge of the message, horizontally centered.
.Popover-message--right: Places the caret on the right edge of the message, vertically centered.
.Popover-message--left: Places the caret on the left edge of the message, vertically centered.
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.
The samples below include optional markup, like:
Defaults to caret oriented top-center.