Onsen UI CSS Component Popover(left)
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 a left popover.
Onsen UI CSS Component Popover(left) 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–left: This class is used to place the popover at the left
- popover__arrow: This class is used to display the arrow-shaped diagram for the popover.*
- popover–left__arrow: This class is used to rotate the arrow-shaped diagram to the left face.
- popover__content: This class is used to place the content area of the popover.*
- popover–left__content: This class is used to place the content area at the left of the popover.
Note: The * marked classes are used in all popovers.
Syntax:
<div class="popover-mask"></div> <div class="popover popover--left" style="..."> <div class="popover__arrow popover--left" style="..."></div> <div class="popover__content popover--left"> <div style="...">...</div> </div> </div>
Example 1: In this example we will create a popover text, here we create a left popover basically.
HTML
<!DOCTYPE html> < html > < head > < title >Onsen UI CSS Component Popover</ title > <!-- 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;" > w3wiki </ h2 > < strong > Onsen UI CSS Component Popover(Left) </ strong > < div class = "popover-mask" ></ div > < div class = "popover popover--left" style = "top: 150px;left: 200px;" > < div class = "popover__arrow popover--left__arrow" style = "top: 25px;" > </ div > < div class = "popover__content popover--left__content" > < div style="text-align: center; opacity: 0.8; margin: 15px"> A Computer Science Portal for Beginner </ div > </ div > </ div > </ center > </ body > </ html > |
Output:
Example 2: Here in this example, we will create a conversation-type left popover, like two friends are having a conversation.
HTML
<!DOCTYPE html> < html > < head > < title >Onsen UI CSS Component Popover</ title > <!-- 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;" > w3wiki </ h2 > < strong > Onsen UI CSS Component Popover(Left) </ strong > < div class = "popover-mask" ></ div > < div class = "popover popover--left" style = "top: 150px;left: 200px;" > < div class = "popover__arrow popover--left__arrow" style = "top: 25px;" > </ div > < div class = "popover__content popover--left__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--left" style = "bottom: 400px; left: 460px;" > <!-- Using the right arrow for better look --> < div class = "popover__arrow popover--right__arrow" style = "top: 25px;" > </ div > < div class = "popover__content popover--left__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:
Reference: https://onsen.io/v2/api/css.html#popover-category