Skip to content
Related Articles

Related Articles

Onsen UI CSS Component Basic Popover

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Jul, 2022
View Discussion
Improve Article
Save Article

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.

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

Onsen UI CSS Component Popover 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–bottom: 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–bottom__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–bottom__content: This class is used to place the content area at bottom of the popover.

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

Syntax:

<div class="popover-mask"></div>
<div class="popover popover--bottom" style="...">
  <div class="popover__arrow popover--bottom__arrow" style="..."></div>
  <div class="popover__content popover--bottom__content">
    <div style="...">...</div>
  </div>
</div>

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <strong>
            Onsen UI CSS Component Basic Popover
        </strong>
        <div class="popover-mask"></div>
        <div class="popover" 
             style="bottom: 450px; left: 360px;">
            <div class="popover__arrow popover--bottom__arrow"
                 style="left: 110px;">
            </div>
            <div class="popover__content">
                <div style="opacity:0.8;
                        margin:10px">
                    A Computer Science Portal for Geeks
                </div>
            </div>
        </div>
    </center>
</body>
  
</html>

Output:

Onsen UI CSS Component Basic Popover

Onsen UI CSS Component Basic Popover

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <strong>
            Onsen UI CSS Component Basic Popover
        </strong>
        <div class="popover-mask"></div>
        <div class="popover" 
             style="bottom: 450px; left: 210px;">
            <div class="popover__arrow 
                        popover--bottom__arrow" 
                 style="left: 50px;">
            </div>
            <div class="popover__content">
                <div style="opacity:0.8; margin:10px;">
                    Bro I am tensed about the placement
                </div>
            </div>
        </div>
  
        <div class="popover" 
             style="bottom: 400px; left: 460px;">
            <div class="popover__arrow 
                        popover--bottom__arrow"
                 style="left: 200px;">
            </div>
            <div class="popover__content">
                <div style="opacity:0.8; margin:10px;">
                    GFG karlo, ho jayega 
                    It's the best platform
                </div>
            </div>
        </div>
    </center>
</body>
  
</html>

Output:

Onsen UI CSS Component Basic Popover

Onsen UI CSS Component Basic Popover

Reference: https://onsen.io/v2/api/css.html#popover-category


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!