Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
|Block element, position absolute|
|Child 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.
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.
|Caret bottom left|
|Caret bottom right|
|Caret left bottom|
|Caret left top|
|Caret right bottom|
|Caret right top|
|Caret top left|
|Caret top right|
|Larger width on screens wider than 544px|
The samples below include optional markup, like:
For screen sizes smaller than 767px,
Popover will appear full-width and without a caret.
Defaults to caret oriented top-center.