Primer CSS Popover Left-top

Last Updated : 24 Apr, 2022

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 Left-top which pops the message to the top-left side of an element.

Primer CSS Popover Left-top 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–left-top: This class is used to set the popover pop as the top side of the left of an element.

Syntax:

<div class="d-flex flex-justify-center flex-items-start">
  <button class="btn btn-primary">
      ...
  </button>
  <div class="Popover position-relative">
    <div class="Popover-message Popover-message--left-top 
       p-4 ml-2 Box color-shadow-large">
      <h4>...</h4>
      <p>...</p>
      <button type="submit" class="btn">
          ...
      </button>
    </div>
  </div>
</div>

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Primer CSS Popover Left-top</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <h1 class="color-fg-success text-center"> 
        GeeksforGeeks 
    </h1> 
      
    <h3 class="text-center">  
        Primer CSS Popover Left-top. 
    </h3> 
  
    <div class="d-flex flex-justify-center flex-items-start mt-3"> 
        <button class="btn btn-primary"> 
            Hi! Geeks 
        </button> 
        <div class="Popover position-relative"> 
            <div class="Popover-message Popover-message--left-top  
             p-4 ml-2 Box color-shadow-large"> 
                <h4 class="mb-2">GeeksforGeeks</h4> 
                <p> 
                    It is a Computer Science portal for 
                    all geeks across the world. 
                </p> 
  
                <button type="submit" class="btn btn-primary  
              mt-2 text-bold">Understood! 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Popover Left-top

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Primer CSS Popover Left-top</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <h1 class="color-fg-success text-center"> 
        GeeksforGeeks 
    </h1> 
      
    <h3 class="text-center"> 
        Primer CSS Popover Left-top. 
    </h3> 
  
    <div class="d-flex flex-justify-center flex-items-start mt-3"> 
        <img height="150px" width="150px" alt="gfg" src= 
"https://media.geeksforgeeks.org/img-practice/mentors/91578d3b1519643ba6a211b406b0dd1a16d93eac.png"> 
  
        <div class="Popover position-relative"> 
            <div class="Popover-message Popover-message--left-top  
                p-4 ml-2 Box color-shadow-large"> 
                <h4 class="mb-2"> 
                    Data Structures and Algorithms - Self Paced 
                </h4> 
                  
                <p> 
                    Most popular course on DSA trusted by over 75,000 
                    students! Built with years of experience by industry 
                    experts and gives you a complete package of video 
                    lectures, practice problems, quizzes, discussion forums 
                    and contests. Start Today! 
                </p> 
  
                <button type="submit" 
                    class="btn btn-primary mt-2 text-bold"> 
                    Buy Now 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>