Primer CSS Popover Variants

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= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </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= 
        "https://code.jquery.com/jquery-3.6.0.min.js"> 
    </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> 