Primer CSS Popover

Primer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates 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 a highly reusable model. One such component present in the Primer CSS library is Popover. 

In this article, we will learn about the Popover component. Popovers are used to grab users’ attention to some specific elements of the website to suggest some tips or guide them through a new experience. The two main classes of the Popover component in Primer CSS are “Popover” and “Popover-message”.  By default, the Popover caret is shown on the top edge of the message and it is horizontally centered. But we can change the default position and make the caret appear based on our requirement on the website using the different Popover classes discussed later.

Primer CSS Popover elements:

• Basic: By default, we can create a Popover with two classes “Popover” and “Popover-message”. By default, the message caret is positioned to be top-centered.
• Large: We can create a larger Popover by adding the “Popover-message–large” class along with the “Popover-message” class to the message container of the popover element. This makes the Popover message show in a large popover.
• Bottom: We can create and display the popover message caret to the bottom by adding the “Popover-message–bottom” class along with the “Popover-message” class to the message content of the Popover element.
• Bottom-Right: We can create and display the Popover message caret to the bottom-right by adding the “Popover-message–bottom-right” class along with the “Popover-message” class to the message container of the Popover element.
• Bottom-Left: We can create and display the Popover message caret to the bottom-left by adding the “Popover-message–bottom-left” class along with the “Popover-message” class to the message container of the Popover element.
• Left: We can create a display of the Popover message caret to the left by adding the “.Popover-message–left” class along with the “Popover-message” class to the message container of the Popover element.
• Left-Bottom: We can create and display the Popover message caret to the left-bottom by adding the “Popover-message–left-bottom” class along with the “Popover-message” class to the message container of the Popover element.
• Left-Top: We can create and display the Popover message caret to the left-top by adding the “Popover-message–left-top” class along with the “Popover-message” class to the message container of the Popover element.
• Right: We can create a display of the Popover message caret to the right by adding the “Popover-message–right” class along with the “Popover-message” class to the message container of the Popover element.
• Right-Bottom: We can create and display the Popover message caret to the right-bottom by adding the “Popover-message–right-bottom” class along with the “Popover-message” class to the message container of the Popover element.
• Right-Top: We can create and display the Popover message caret to the right-top by adding the “Popover-message–right-top” class along with the “Popover-message” class to the message container of the Popover element.
• Top-Left: We can create and display the Popover message caret to the top-left by adding the “Popover-message–top-left” class along with the “Popover-message” class to the message container of the Popover element.
• Top-Right: We can create and display the Popover message caret to the top-right by adding the “Popover-message–top-right” class along with the “Popover-message” class to the message container of the Popover element.

Syntax:

<div class="position-relative text-center">
    <button class="btn btn-primary">....</button>
    <div class="Popover right-0 left-0 position-relative">
        <div class="Popover-message Box ">
            <h4>...</h4>
            <p>....</p>
            <button type="submit" class="btn btn-outline ">
                ...
               </button>
        </div>
    </div>
</div>

Example 1: We have created 4 different popovers. The first one is with the default (top) position, the second with the bottom position and third with the left position, and the fourth with the right position.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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" />

    <style>
        body {
            margin-left: 5px;
            margin-right: 30px;
        }
    </style>
</head>

<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>

    <h2 style="text-align:center;">
        Primer CSS Pop over
    </h2>

    <div class="container">
        <div class="d-flex flex-justify-center
            flex-items-center" style="margin:2em;">
            <div class="position-relative text-center">
                <button class="btn btn-primary">
                    Popover
                </button>
                <div class="Popover right-0
                    left-0 position-relative">
                    <div class="Popover-message text-left
                        p-4 mt-2 mx-auto Box color-shadow-large">
                        <h4 class="mb-2">Popover heading</h4>
                        <p>Sample message</p>
                        <button type="submit" class=
                            "btn btn-outline mt-2 text-bold">
                            Ok
                        </button>
                    </div>
                </div>
            </div>
            <div class="position-relative text-center"
                style="margin:2em;">
                <div class="Popover position-relative">
                    <div class="Popover-message Popover-message--bottom
                        p-4 mx-auto mb-2 color-shadow-large">
                        <h4 class="mb-2">Popover heading</h4>
                        <p>Sample message</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 class="Popover position-relative"
                style="margin:2em;">
                <div class="Popover-message Popover-message--right
                    p-4 mr-2 color-shadow-large">
                    <h4 class="mb-2">Popover heading</h4>
                    <p>Sample message</p>
                    <button type="submit" class=
                        "btn btn-outline mt-1 text-bold">
                        Ok
                    </button>
                </div>
            </div>
            <button class="btn btn-primary">
                Popover right
            </button>
        </div>

        <div class="d-flex flex-justify-center
            flex-items-center" style="margin:2em;">
            <button class="btn btn-primary">
                Popver Left
            </button>
            <div class="Popover position-relative">
                <div class="Popover-message Popover-message--left
                    p-4 ml-2 color-shadow-large">
                    <h4 class="mb-2">Popover heading</h4>
                    <p>Sample message</p>
                    <button type="submit" class=
                        "btn btn-outline mt-2 text-bold">
                        Ok
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: We have created a larger popover for large screen size.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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" />

</head>

<body>
    <h1 style="color:green; text-align:center;">
        GeeksforGeeks
    </h1>
    <h2 style="text-align:center;">
        Primer CSS Pop over
    </h2>

    <div class="position-relative text-center">
        <button class="btn btn-primary">
            Large Popover
        </button>
        <div class="Popover right-0 left-0 position-relative">
            <div class="Popover-message Popover-message--large
                p-4 mt-2 color-shadow-large">
                <h4 class="mb-2">Popover heading</h4>
                <p>Message to be displayed by the popover</p>
                <button type="submit" class=
                    "btn btn-outline mt-2 text-bold">
                    okay
                </button>
            </div>
        </div>
    </div>
</body>

</html>

Output:

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