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.

Output:

Onsen UI CSS Component Popover(left)

Example 2: Here in this example, we will create a conversation-type left popover, like two friends are having a conversation.

Output:

Onsen UI CSS Component Popover(left)

Reference: https://onsen.io/v2/api/css.html#popover-category