Skip to content
Related Articles

Related Articles

Primer CSS Popover Variants

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 16 May, 2022

Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.

Primer CSS Popovers are used to bring the attention of the users to specific content. This is typically an action or an important message for the respective users. Popovers generally have two important classes as follows:

  • Popover: Block element with absolute position
  • Popover-message: It is the child element which is the content and caret.

The default positioning of the caret is on the top edge of the Popover-message with horizontally centered. In order to change from its default position, we can use the different available Popover Variants Classes, which can help us to position the caret by specifying the different modifiers with Popover-message.

Primer CSS Popover Variants Classes:

  • Popover-message–bottom: Caret bottom
  • Popover-message–right: Caret right
  • Popover-message–left: Caret left
  • Popover-message–bottom-left: Caret bottom left
  • Popover-message–bottom-right: Caret bottom right
  • Popover-message–left-bottom: Caret left bottom
  • Popover-message–left-top: Caret left top
  • Popover-message–right-bottom: Caret right bottom
  • Popover-message–right-top: Caret right top
  • Popover-message–top-left: Caret top left
  • Popover-message–top-right: Caret top right
  • Popover-message–large: Larger width on screens wider than 544px

Syntax: Create a popover as follows:

<div class="d-flex flex-justify-center flex-items-center">
  <div class="Popover position-relative">
    <div class="Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large">
      <h4 class="mb-2">GeeksforGeeks</h4>
      <p>Welcome to GeeksforGeeks</p>
    </div>
  </div>
  <button class="btn btn-primary">Popover</button>
</div>

Example 1: In the following example, we have four different 4 different popovers in different directions.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>Primer CSS Popover Variants</strong>
            <br />
        </center>
  
        <div class="d-flex flex-justify-center flex-items-center">
            <div class="Popover position-relative">
                <div class="Popover-message Popover-message--right 
                    p-4 mr-2 Box color-shadow-large">
                    <h4 class="mb-2">GeeksforGeeks</h4>
  
                    <p>Welcome to GeeksforGeeks</p>
  
                    <button type="submit" class="btn 
                        btn-outline mt-2 text-bold"> Ok
                    </button>
                </div>
            </div>
            <button class="btn btn-primary">
                Popover Right
            </button>
        </div>
        <br />
  
        <div class="d-flex flex-justify-center 
            flex-items-center">
            <button class="btn btn-primary">
                Popover Left
            </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>Welcome to GeeksforGeeks</p>
  
                    <button type="submit" class=
                        "btn btn-outline mt-2 text-bold"> Ok
                    </button>
                </div>
            </div>
        </div>
        <br />
        <div class="position-relative pl-2">
            <button class="btn btn-primary">
                Popover Top-Left
            </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>Welcome to GeeksforGeeks</p>
                    <button type="submit" class="btn 
                        btn-outline mt-2 text-bold"> Ok
                    </button>
                </div>
            </div>
        </div>
        <br />
  
        <div class="position-relative text-center">
            <div class="Popover position-relative">
                <div class="Popover-message 
                    Popover-message--bottom p-4 mx-auto
                    mb-2 text-left Box color-shadow-large">
                    <h4 class="mb-2">GeeksforGeeks</h4>
                    <p>Welcome to GeeksforGeeks</p>
                    <button type="submit" class="btn 
                        btn-outline mt-2 text-bold"> Ok
                    </button>
                </div>
            </div>
            <button class="btn btn-primary">
                Popover Bottom
            </button>
        </div>
    </div>
</body>
  
</html>


Output

 

Example 2: In the following example, we have created a large popover on the screen.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>Primer CSS Popover Variants</strong>
            <br />
        </center>
  
        <div class="position-relative text-center">
            <button class="btn btn-primary">
                Popover Large
            </button>
            <div class="Popover right-0 left-0 
                position-relative">
                <div class="Popover-message 
                    Popover-message--large text-left 
                    p-4 mt-2 Box color-shadow-large">
                    <h4 class="mb-2">GeeksforGeeks</h4>
  
                    <p>Welcome to GeeksforGeeks</p>
  
                    <button type="submit" class="btn 
                        btn-outline mt-2 text-bold"> Ok
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!