Popovers

Popovers are small overlay content containers.

top popover

Apple

Software and hardware

To make a contribution to the world by making tools for the mind that advance humankind.

right popover

Apple

Software and hardware

To make a contribution to the world by making tools for the mind that advance humankind.

bottom popover

Apple

Software and hardware

To make a contribution to the world by making tools for the mind that advance humankind.

left popover

Apple

Software and hardware

To make a contribution to the world by making tools for the mind that advance humankind.

Wrap an element by a container with the popover class. And add a container with the popover-container next to the element. You can use Cards component inside the popover-container.

Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.

<div class="popover popover-right">
  <button class="btn btn-primary">right popover</button>
  <div class="popover-container">
    <div class="card">
      <div class="card-header">
        ...
      </div>
      <div class="card-body">
        ...
      </div>
      <div class="card-footer">
        ...
      </div>
    </div>
  </div>
</div>