Primer CSS Popover Right-bottom

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS offers Popover that is used to carry attention to precise user interface elements, generally to indicate any action or to guide users via a new experience. In this article, we will discuss Popover’s right-bottom that pops the message to the right-bottom side of the element.

Primer CSS Popover Right-bottom used classes:

• Popover: This class is used to create a popover element. The rest of the popover classes should be wrapped inside this class.
• Popover-message–right-bottom: This class is used to set the popover pop as the bottom side of the right of an element.

Syntax:

<div class="d-flex flex-justify-center flex-items-end">
  <div class="Popover position-relative">
    <div class="Popover-message Popover-message--right-bottom 
       p-4 mr-2 Box color-shadow-large">
      <h4 class="mb-2">...</h4>
      <p>...</p>
      <button type="submit" class="btn">
          ...
      </button>
    </div>
  </div>
  
  <button class="btn">
      ...
  </button>
</div>

Example 1: Below is the example that demonstrates the use of Primer CSS Popover Right-bottom.

Output:

Primer CSS Popover Right-bottom

Example 2: Below is another example that demonstrates the use of Primer CSS Popover Right-bottom using an image. 

Output:

Primer CSS Popover Right-bottom

Reference: https://primer.style/css/components/popover#right-bottom