In this article, we will learn how to include popover using Onsen UI. Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, with ready-to-use features that follow native iOS and Android design standards.
Onsen UI was created with AngularJS in mind, but it can also be used with jQuery or any other framework. Onsen UI is a PhoneGap and Cordova JavaScript Framework.
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.
Popover CSS Components:
Classes:
- popover: This class is used to create a popover interface.
- popover-mask: This class is used to create a simple popover mask.
- popover__arrow: This class is used to create an arrow popover.
- popover__content: This class is used to create a content popover.
- popover__content: This class is used to create content popover.
Basic Popover: This component is used to provide a basic popover at the bottom of the page.
- popover–bottom: This class is used to create a popover at the bottom position.
- popover–bottom__arrow: This class is used to create an arrow popover at the bottom position.
- popover–bottom__content: This class is used to create a content popover at the bottom position.
Popover(top): This component is used to provide a popover at the top of the page.
- popover–top: This class is used to create popover at the top position.
- popover–top__arrow: This class is used to create an arrow popover at the top position.
- popover–top__content: This class is used to create a content popover at the top position.
Popover(left): This component is used to provide a popover at the left-most corner of the webpage.
- popover–left: This class is used to create a popover at the left position.
- popover–left__arrow: This class is used to create an arrow popover at the left position.
- popover–left__content: This class is used to create a content popover at the left position.
Popover(right): This component is used to provide a popover at the right-most corner of the webpage.
- popover–right: This class is used to create a popover at the right position.
- popover–right__arrow: This class is used to create the right popover at the right position.
- popover–right__content: This class is used to create content popover at the right position.
Material Popover: This component is used to provide a popover of material type and their associated classes are listed below.
- popover-mask–material: This class is used to create a mask material popover.
- popover–material: This class is used to create a material popover.
- popover–material__arrow: This class is used to create a material popover.
- popover–material__content: This class is used to create material content.
Syntax:
<element-name class="class-name">...</element-name>
Example 1: In the below code, we will make use of the above classes to demonstrate the use of the popover component.
<!DOCTYPE html> <html>
<head>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Onsen UI Popover CSS Components
</h3> <br> <br>
<div class="popover-mask"></div>
<div class="popover popover--bottom" style="bottom: 20px; left: 65px;">
<div class="popover__arrow popover--bottom__arrow" style="left: 110px;">
</div>
<div class="popover__content popover--bottom__content">
<div style="text-align:center;opacity:0.8;
margin-top:40px">
Content
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2: In the below code, we will make use of the above classes to demonstrate the use of the popover component.
<!DOCTYPE html> <html>
<head>
<!-- CDN links of Onsen UI library -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Onsen UI Popover CSS Components
</h3> <br> <br>
<div class="popover-mask"></div>
<div class="popover popover--right" style="top: 20px; right: 20px;">
<div class="popover__arrow popover--right__arrow" style="bottom: 50px;">
</div>
<div class="popover__content popover--right__content">
<div style="text-align: center; opacity: 0.8;
margin-top: 40px">
Content
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#popover-category