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 >
< 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 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 >
< 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 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 >
|
Output:
Reference: https://onsen.io/v2/api/css.html#popover-category
Share your thoughts in the comments
Please Login to comment...