Onsen UI CSS Component Popover(right)

Last Updated : 19 Nov, 2022

Popovers are used to notify the user about what notes a user should know before he 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 here in this article we will create the right popover.

Onsen UI CSS Component Popover(right) 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–right: This class is used to place the popover at the right.
popover__arrow: This class is used to display the arrow-shaped diagram for the popover.*
popover–right__arrow: This class is used to rotate the arrow-shaped diagram to the right face.
popover__content: This class is used to place the content area of the popover.*
popover–right__content: This class is used to place the content area at the right of the popover.

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

Syntax:

<div class="popover-mask"></div>
<div class="popover popover--right" style="...">
 <div class="popover__arrow popover--right__arrow" style="..."></div>
 <div class="popover__content popover--right__content">
   <div style="...">...</div>
 </div>
</div>

Example 1: In this example, we will create a popover text, the basic popover is the bottom popover basically.

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(right)
        </strong>
 
        <div class="popover-mask"></div>
        <div class="popover popover--right"
                style="top: 150px; right: 180px;">
            <div class="popover__arrow 
                        popover--right__arrow" 
                style="bottom: 70px;">
            </div>
            <div class="popover__content 
                        popover--right__content">
                <div style="text-align: center; 
                            opacity: 0.8; margin: 15px">
                    A Computer Science Portal for Geeks
                </div>
            </div>
        </div>
    </center>
</body>
 
</html>

Output:

Onsen UI CSS Component Popover(right)

Example 2: Here in this example, we will create a conversation-type right 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(right)
       </strong>
 
       <div class="popover-mask"></div>
       <div class="popover popover--right"
            style="top: 150px; right: 180px;">
            <div class="popover__arrow 
                        popover--right__arrow" 
                style="bottom: 70px;">
            </div>
            <div class="popover__content 
                        popover--right__content">
                <div style="text-align: center; 
                            opacity: 0.8; margin: 15px">
                    Bro I am tensed about the placement
                </div>
            </div>
       </div>
        
       <div class="popover popover--right"
            style="top: 280px; right: 430px;">
            <div class="popover__arrow 
                        popover--left__arrow" 
                 style="bottom: 70px;">
            </div>
               
          <!-- Using the left arrow for better look -->
            <div class="popover__content 
                        popover--right__content">
                <div style="text-align: center; 
                            opacity: 0.8; margin: 15px">
                    GFG karlo, ho jayega It's the best platform
                </div>
            </div>
        </div>
    </center>
</body>
 
</html>