Popover

Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering the page

Interactive demo

Bottom aligned

<p class="text-left"> Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy <span class="has-popover">
    <span class="popover-link">bottom - left aligned</span>
    <span class="pop-overlay"></span>
    <span class="popover-content align-left" style="display: none;">
      <span class="popover-close">
        <i class="fal fa-times"></i>
      </span>
      <span class="pop-title">Title</span> Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy </span>
  </span> text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <span class="has-popover">
    <span class="popover-link">bottom - center aligned</span>
    <span class="pop-overlay"></span>
    <span class="popover-content align-center" style="display: none;">
      <span class="popover-close">
        <i class="fal fa-times"></i>
      </span>
      <span class="pop-title">Title</span> Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy </span>
  </span> electronic typesetting, essentially unchanged. It was popularised in 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and recently with desktop <span class="has-popover">
    <span class="popover-link">bottom - right aligned</span>
    <span class="pop-overlay"></span>
    <span class="popover-content align-right" style="display: none;">
      <span class="popover-close">
        <i class="fal fa-times"></i>
      </span>
      <span class="pop-title">Title</span> Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy </span>
  </span> software like Aldus PageMaker including versions of Lorem Ipsum </p>

When to use

• Always be positioned near to the button or other interface element that triggers them

• Be used for secondary or less important information and actions since they’re hidden until merchants hit the trigger

• Contain navigation or actions that share a relationships to each other

• Be triggered by a clearly labeled button