Onsen UI CSS Component Material Popover

Last Updated : 13 Jun, 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.

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 material popover.

Onsen UI CSS Component Material Popover Classes:

popover-mask: This class is used to set a gray background effect so the default white popover can be visible.*
popover-mask–material: This class is used to set a material background effect
popover: This class is used to create a popover interface.*
popover–material: This class is used to display the popover
popover–direction*: 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–material__arrow: This class is used to render the material arrow.
popover–direction*__arrow: This class is used to rotate the arrow-shaped diagram to the place you want.
popover__content: This class is used to place the content area of the popover.*
popover–material__content: This class is used to place the material content area.
popover–direction*__content: This class is used to place the content area where you want the popover.

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

Syntax:

<div class="popover-mask 
    popover-mask--material">
</div>
<div class="popover 
    popover--material
    popover--direction*" 
    style="...">
      <div class="popover__arrow 
        popover--material__arrow 
        popover--direction*__arrow">
    </div>
      <div class="popover__content 
        popover--material__content 
        popover--direction*__content">
        <div style="...">...</div>
      </div>
</div>

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- 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 Material Popover 
        </strong> 
        <div class="popover-mask popover-mask--material"> 
        </div> 
        <div class="popover popover--material popover--left" 
             style="top: 150px; left: 355px;"> 
            <div class="popover__arrow  
                     popover--left__arrow"> 
  
            </div> 
            <div class="popover__content 
                     popover--material__content 
                     popover--left__content"> 
                <div style="text-align: center;  
                       opacity: 0.8; 
                       margin: 20px"> 
                    A Computer Science Portal for Geeks 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- 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 Material Popover 
        </strong> 
        <div class="popover-mask popover-mask--material"></div> 
        <div class="popover popover--material popover--left" 
             style="top: 150px; left: 210px;"> 
            <div class="popover__arrow  
                     popover--material__arrow  
                     popover--left__arrow"> 
  
            </div> 
            <div class="popover__content 
                     popover--material__content 
                     popover--left__content" 
                 style="background-color: gray;"> 
                <div style="text-align: center;  
                       opacity: 0.8; 
                       margin: 20px;"> 
                    Which is best platform to learn DSA ? 
                </div> 
            </div> 
  
            <div class="popover popover--material popover--right" 
                 style="top: 150px; left: 210px;"> 
                <div class="popover__arrow  
                     popover--material__arrow  
                     popover--right__arrow"> 
  
                </div> 
                <div class="popover__content 
                     popover--material__content 
                     popover--left__content"  
                     style="background-color: green;"> 
                    <div style="text-align: center;  
                       opacity: 0.8; 
                       margin: 20px; 
                       background-color: yellow"> 
                        It's Geeksforgeeks bro 
                    </div> 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>