Popover

Popovers provide a contextual space, attached to an element and in an upper z-index layer, where you can include any kind of HTML code related to the trigger.

Examples

Base

Popover components are absolutely positioned. For this example we have forced a relative position.

TipRemove the -active class to hide the popover.

<div class="m-popover -active">
  <div class="-px--2 -py--1 -s--3">
    <h5>Popover!</h5>
    <p>This is a popover content.</p>
  </div>
</div>

Arrow

Popovers support arrows to show the origin where they come from. Arrows can be located anywhere around the Popover. Use the classes m-popover--top, m-popover--right, m-popover--bottom and m-popover--left to position the arrow in the proper place.

TipIf you use a position engine as Popper.js (as our JavaScript solution), the attribute x-placement should be used instead of these classes. It accepts all the values Popper.js does. Popper.js sets this attribute automatically, so there is no need to include it on the code.

• Top
• Right
• Bottom
• Left

<div class="m-popover m-popover--top -active">
  <div class="-px--2 -py--1 -s--3">
    <h5>Popover!</h5>
    <p>This is a popover content.</p>
  </div>
  <div class="a-arrow"></div>
</div>

<div class="m-popover m-popover--right -active">
  <div class="-px--2 -py--1 -s--3">
    <h5>Popover!</h5>
    <p>This is a popover content.</p>
  </div>
  <div class="a-arrow"></div>
</div>

<div class="m-popover m-popover--bottom -active">
  <div class="-px--2 -py--1 -s--3">
    <h5>Popover!</h5>
    <p>This is a popover content.</p>
  </div>
  <div class="a-arrow"></div>
</div>

<div class="m-popover m-popover--left -active">
  <div class="-px--2 -py--1 -s--3">
    <h5>Popover!</h5>
    <p>This is a popover content.</p>
  </div>
  <div class="a-arrow"></div>
</div>