Open In App

Primer CSS Popover Left

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Syntax:

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

Example 1: Below example demonstrates the use of Primer CSS Popover Left. 

HTML




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


Output:

Primer CSS Popover Left

Example 2: Below is another example that demonstrates the use of Primer CSS Popover Left. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Popover Left </title>
    <link rel="stylesheet" href=
    "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <center>
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Popover Left </h3>
      
        <div class="d-flex flex-justify-center flex-items-center mt-3">
            <img src=
                 alt="gfg">
              
            <div class="Popover position-relative">
              <div class="Popover-message Popover-message--left 
                   p-4 ml-2 Box color-shadow-large">
                <h4 class="mb-2">Geeks Summer Carnival</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>    
    </center>
</body>
  
</html>


Output:

Primer CSS Popover Left

Reference: https://primer.style/css/components/popover#left



Last Updated : 24 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads