Popovers

Use popovers to display supplementary or helpful information in a non-modal dialogue. For the dark gray popover, simply add the modifier class in addition to the base class, such as .popover-right--gray. If you need to adjust the positioning of the caret, do so with custom styling inside your application.

A popover placed to the right of the content it relates to

<div class="popover-right xs-mb2">
  <span>The popover is an American version of Yorkshire pudding.</span>
</div>

<div class="popover-right popover-right--gray xs-mb2">
  <span>The popover is an American version of Yorkshire pudding.</span>
</div>

A popover placed to the left of the content it relates to

<div class="popover-left xs-mb2">
  <span>The popover is an American version of Yorkshire pudding.</span>
</div>

<div class="popover-left popover-left--gray xs-mb2">
  <span>The popover is an American version of Yorkshire pudding.</span>
</div>

A popover placed to the top of the content it relates to

<div class="popover-top xs-mb2">
  <span>The popover is an American version of Yorkshire pudding.</span>
</div>

<div class="popover-top popover-top--gray xs-mb2">
  <span>The popover is an American version of Yorkshire pudding.</span>
</div>

A popover placed to the bottom of the content it relates to

<div class="popover-bottom xs-mb2">
  <span>The popover is an American version of Yorkshire pudding.</span>
</div>

<div class="popover-bottom popover-bottom--gray xs-mb2">
  <span>The popover is an American version of Yorkshire pudding.</span>
</div>