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. 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.
.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.