Onsen UI CSS Component Popover (top)

Last Updated : 19 Nov, 2022

Popovers are used to notify the user about what notes a user should know before the proceeds further. It can also be used as a notification, like supposing the user has no idea what is going on in any particular section, then this popover can help or guide him/her.

Onsen UI CSS Component offers us to create a self-designed popover. There are a lot of popovers and in this article, we will create a top popover.

Onsen UI CSS Component Popover(top) Classes:

popover-mask: This class is used to set a gray background effect so the default white popover can be visible.*
popover: This class is used to create a popover interface.*
popover–top: This class is used to place the popover at the bottom
popover__arrow: This class is used to display the arrow-shaped diagram for the popover.*
popover–top__arrow: This class is used to rotate the arrow-shaped diagram to the bottom face.
popover__content: This class is used to place the content area of the popover.*
popover–top__content: This class is used to place the content area at top of the popover.

Note: The * marked classes are used in all popovers.

Syntax:

<div class="popover-mask"></div>
<div class="popover popover--top" style="...">
     <div class="popover__arrow 
         popover--top__arrow" style="..."></div>
     <div class="popover__content popover--top__content">
           <div style="...">...</div>
     </div>
</div>

Example 1: In this example, we will create a popover text.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Onsen UI CSS Component Popover</title>
 
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
        "https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js">
    </script>
</head>
 
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
 
        <strong>
            Onsen UI CSS Component Popover(top)
        </strong>
         
        <div class="popover-mask"></div>
         
        <div class="popover popover--top"
            style="top: 150px; left: 350px;">
            <div class="popover__arrow popover--top__arrow"
                style="margin-left: 25px;"></div>
            <div class="popover__content popover--top__content">
                <div style="text-align: center; 
                    opacity: 0.8; margin: 20px;">
                    A Computer Science Portal for Geeks
                </div>
            </div>
        </div>
    </center>
</body>
 
</html>

Output:

Onsen UI CSS Component Popover(top)

Example 2: In this example, we will create a conversation-type top popover, like two friends are having a conversation.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Onsen UI CSS Component Popover</title>
 
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
        "https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js">
    </script>
</head>
 
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <strong>
            Onsen UI CSS Component Popover(top)
        </strong>
 
        <div class="popover-mask"></div>
        <div class="popover popover--top"
            style="top: 150px; left: 310px;">
            <div class="popover__arrow popover--top__arrow"
                style="margin-left: 25px;"></div>
 
            <div class="popover__content popover--top__content">
                <div style="text-align: center; 
                    opacity: 0.8; margin: 20px;">
                    Bro I am tensed about the placement
                </div>
            </div>
        </div>
 
        <div class="popover popover--top"
            style="top: 270px; left: 420px;">
             
            <!-- Using the bottom arrow for better look -->
            <div class="popover__arrow popover--bottom__arrow"
                style="margin-left: 180px;"></div>
            <div class="popover__content popover--top__content">
                <div style="text-align: center; 
                    opacity: 0.8; margin: 20px;">
                    GFG karlo, ho jayega It's the best platform
                </div>
            </div>
        </div>
    </center>
</body>
 
</html>