Popover Not reviewed for accessibility Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
Class Description 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.
Class Description 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
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.
Defaults to caret oriented top-center.
< div class = " position-relative text-center " >
< button class = " btn btn-primary " > UI </ button >
< div class = " Popover right-0 left-0 position-relative " >
< div class = " Popover-message text-left p-4 mt-2 mx-auto Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
</ div >
< div class = " position-relative text-center " >
< button class = " btn btn-primary " > UI </ button >
< div class = " Popover right-0 left-0 position-relative " >
< div class = " Popover-message Popover-message--large text-left p-4 mt-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
</ div >
< div class = " position-relative text-center " >
< div class = " Popover position-relative " >
< div class = " Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
< button class = " btn btn-primary " > UI </ button >
</ div >
< div class = " position-relative text-right pr-2 " >
< div class = " Popover position-relative " >
< div class = " Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
< button class = " btn btn-primary " > UI </ button >
</ div >
< div class = " Popover position-relative pl-2 " >
< div class = " Popover-message Popover-message--bottom-left p-4 mb-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
< button class = " btn btn-primary " > UI </ button >
</ div >
< div class = " d-flex flex-justify-center flex-items-center " >
< button class = " btn btn-primary " > UI </ button >
< div class = " Popover position-relative " >
< div class = " Popover-message Popover-message--left p-4 ml-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
</ div >
< div class = " d-flex flex-justify-center flex-items-end " >
< button class = " btn btn-primary " > UI </ button >
< div class = " Popover position-relative " >
< div class = " Popover-message Popover-message--left-bottom p-4 ml-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
</ div >
< div class = " d-flex flex-justify-center flex-items-start " >
< button class = " btn btn-primary " > UI </ button >
< div class = " Popover position-relative " >
< div class = " Popover-message Popover-message--left-top p-4 ml-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
</ div >
< div class = " d-flex flex-justify-center flex-items-center " >
< div class = " Popover position-relative " >
< div class = " Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
< button class = " btn btn-primary " > UI </ button >
</ div >
< div class = " d-flex flex-justify-center flex-items-end " >
< div class = " Popover position-relative " >
< div class = " Popover-message Popover-message--right-bottom p-4 mr-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
< button class = " btn btn-primary " > UI </ button >
</ div >
< div class = " d-flex flex-justify-center flex-items-start " >
< div class = " Popover position-relative " >
< div class = " Popover-message Popover-message--right-top p-4 mr-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
< button class = " btn btn-primary " > UI </ button >
</ div >
< div class = " position-relative pl-2 " >
< button class = " btn btn-primary " > UI </ button >
< div class = " Popover position-relative " >
< div class = " Popover-message Popover-message--top-left p-4 mt-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
</ div >
< div class = " position-relative text-right pr-2 " >
< button class = " btn btn-primary " > UI </ button >
< div class = " Popover right-0 position-relative " >
< div class = " Popover-message Popover-message--top-right text-left p-4 mt-2 Box color-shadow-large " >
< h4 class = " mb-2 " > Popover heading </ h4 >
< p > Message about this particular piece of UI . </ p >
< button type = " submit " class = " btn btn-outline mt-2 text-bold " > Got it ! </ button >
</ div >
</ div >
</ div >
