Design Kit

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.

This component requires Javascript

Examples

Base

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

TipRemove the -active class to hide the popover.

<section class="m-popover -active" aria-label="Popover Title" aria-modal="true" role="dialog">
  <header class="m-popover__header">
    <h2 class="m-popover__title">Popover Title</h2>
  </header>
  <div class="m-popover__content">
    <p class="m-popover__text">Popover content</p>
  </div>
</section>

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.

<section class="m-popover m-popover--top -active" aria-label="Popover Title" aria-modal="true" role="dialog">
  <header class="m-popover__header">
    <h2 class="m-popover__title">Popover Title</h2>
  </header>
  <div class="m-popover__content">
    <p class="m-popover__text">Popover content</p>
  </div>
  <div class="m-popover__arrow"></div>
</section>
<section class="m-popover m-popover--right -active" aria-label="Popover Title" aria-modal="true" role="dialog">
  <header class="m-popover__header">
    <h2 class="m-popover__title">Popover Title</h2>
  </header>
  <div class="m-popover__content">
    <p class="m-popover__text">Popover content</p>
  </div>
  <div class="m-popover__arrow"></div>
</section>
<section class="m-popover m-popover--bottom -active" aria-label="Popover Title" aria-modal="true" role="dialog">
  <header class="m-popover__header">
    <h2 class="m-popover__title">Popover Title</h2>
  </header>
  <div class="m-popover__content">
    <p class="m-popover__text">Popover content</p>
  </div>
  <div class="m-popover__arrow"></div>
</section>
<section class="m-popover m-popover--left -active" aria-label="Popover Title" aria-modal="true" role="dialog">
  <header class="m-popover__header">
    <h2 class="m-popover__title">Popover Title</h2>
  </header>
  <div class="m-popover__content">
    <p class="m-popover__text">Popover content</p>
  </div>
  <div class="m-popover__arrow"></div>
</section>

Popover with custom content

Popover can be used to display any kind of custom content (even other components)
<section class="m-popover m-popover--top -active" aria-label="Popover Title" aria-modal="true" role="dialog">
  <header class="m-popover__header">
    <h2 class="m-popover__title">Popover Title</h2>
  </header>
  <div class="m-popover__content">
    Current progress (75%)
    <progress class="-success" value="75" max="100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progress>
  </div>
  <div class="m-popover__arrow"></div>
</section>