Primer CSS Popover Top-left

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

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

Syntax:

<div class="position-relative pl-2">
  <button class="btn btn-primary">.....</button>
  <div class="Popover position-relative">
    <div class="Popover-message Popover-message--top-left 
                   p-4 mt-2 Box color-shadow-large">
       ...
    </div>
  </div>
</div>

Example 1: Below example demonstrates the use of Primer CSS Popover Top-left.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Popover top-left </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <h1 class="color-fg-success pl-12">  
        GeeksforGeeks 
    </h1> 
      
    <h3 class="pl-12"> 
        Primer CSS Popover top-left 
    </h3> 
  
    <div class="position-relative pl-2 pl-12"> 
        <button class="btn btn-primary"> 
            Hi! Geeks 
        </button> 
          
        <div class="Popover position-relative"> 
            <div class="Popover-message  
            Popover-message--top-left  
            p-4 mt-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-outline mt-2 text-bold"> 
                    Understood! 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Popover Top-left

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Popover top-left </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <h1 class="color-fg-success pl-12">  
        GeeksforGeeks 
    </h1> 
      
    <h3 class="pl-12">  
        Primer CSS Popover top-left 
    </h3> 
  
    <div class="position-relative pl-2 pl-12"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/post-ads-banner/2022-03-27-22-30-23-GSC_icon.png"
            alt="gfg"> 
  
        <div class="Popover position-relative"> 
            <div class="Popover-message  
                Popover-message--top-left  
                p-4 mt-2 Box color-shadow-large"> 
                <h4 class="mb-2">GeeksforGeeks</h4> 
                <p> 
                    GeeksforGeeks is finally back with  
                    Geeks Summer Carnival 2022 the most  
                    awaited 7-days long Summer Carnival  
                    fiesta starting on 5th April 2022  
                    and wrapping on 11th April 2022,  
                    where coders, like you, can get a  
                    110% return on your career growth  
                    investment. 
                </p> 
                <button type="submit" class= 
                    "btn btn-outline mt-2 text-bold"> 
                    Visit 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>