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