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-start"> 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"> <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"> <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"> <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