Popovers are used to notify the user about what notes a user should know before the 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 and in this article, we will create a top popover.
Onsen UI CSS Component Popover(top) 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–top: 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–top__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–top__content: This class is used to place the content area at top of the popover.
Note: The * marked classes are used in all popovers.
Syntax:
<div class="popover-mask"></div>
<div class="popover popover--top" style="...">
<div class="popover__arrow
popover--top__arrow" style="..."></div>
<div class="popover__content popover--top__content">
<div style="...">...</div>
</div>
</div>Example 1: In this example, we will create a popover text.
<!DOCTYPE html><html>
<head>
<title>Onsen UI CSS Component Popover</title>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<strong>
Onsen UI CSS Component Popover(top)
</strong>
<div class="popover-mask"></div>
<div class="popover popover--top"
style="top: 150px; left: 350px;">
<div class="popover__arrow popover--top__arrow"
style="margin-left: 25px;"></div>
<div class="popover__content popover--top__content">
<div style="text-align: center;
opacity: 0.8; margin: 20px;">
A Computer Science Portal for Geeks
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Onsen UI CSS Component Popover(top)
Example 2: In this example, we will create a conversation-type top popover, like two friends are having a conversation.
<!DOCTYPE html><html>
<head>
<title>Onsen UI CSS Component Popover</title>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<strong>
Onsen UI CSS Component Popover(top)
</strong>
<div class="popover-mask"></div>
<div class="popover popover--top"
style="top: 150px; left: 310px;">
<div class="popover__arrow popover--top__arrow"
style="margin-left: 25px;"></div>
<div class="popover__content popover--top__content">
<div style="text-align: center;
opacity: 0.8; margin: 20px;">
Bro I am tensed about the placement
</div>
</div>
</div>
<div class="popover popover--top"
style="top: 270px; left: 420px;">
<!-- Using the bottom arrow for better look -->
<div class="popover__arrow popover--bottom__arrow"
style="margin-left: 180px;"></div>
<div class="popover__content popover--top__content">
<div style="text-align: center;
opacity: 0.8; margin: 20px;">
GFG karlo, ho jayega It's the best platform
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Onsen UI CSS Component Popover(top)
Reference: https://onsen.io/v2/api/css.html#popover-category