A component that displays a popover next to an element. The popover can be used to display extra information about a component or a tooltip.
To use the element it can either be attached directly to the <body> element or dynamically created from a template using the ons.createPopover(template) utility function and the <template> tag.
Another common way to use the popover is to display a menu when a button on the screen is tapped. For Material Design, popover looks exactly as a dropdown menu.
The VOnsPopover component displays a box next to a target component or element. It can be used to show a tooltip, an info box or even for displaying a menu.
To show or hide a popover the visible property is used. Similar to other components, an update:visible event is fired whenever the user interacts with the popover and allow to refresh the value of visible prop. Vue’s v-model directive can be used with v-model:visible.
In order to determine which component it should visually point to, the target prop must be set to either a Vue component reference ($refs), DOM element, DOM query (e.g 'div#id.class' or an event. In the provided example, $event is used to display the popover on $event.target.
The popover will automatically alter its style based on the platform. On Android it will be displayed as a Material Design component that can be used as a menu. The prop coverTarget is provided in order to optionally show the popover over the original target (only for Material Design).
| Name | Description |
|---|---|
| preshow | Fired just before the popover is displayed. |
| postshow | Fired just after the popover is displayed. |
| prehide | Fired just before the popover is hidden. |
| posthide | Fired just after the popover is hidden. |
| dialogcancel | Fired when the popover is canceled. |
| update:visible |
Fired right after user interaction. Useful to update visible prop.
|
| deviceBackButton | Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler. |
Fired just before the popover is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.popover | Object | Component object. |
| event.cancel | Function | Call this function to stop the popover from being shown. |
Fired just after the popover is displayed.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.popover | Object | Component object. |
Fired just before the popover is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.popover | Object | Component object. |
| event.cancel | Function | Call this function to stop the popover from being hidden. |
Fired just after the popover is hidden.
| Name | Type | Description |
|---|---|---|
| event | Object | Event object. |
| event.popover | Object | Component object. |
Fired when the popover is canceled.
| Name | Type | Description |
|---|
Fired right after user interaction. Useful to update visible prop.
| Name | Type | Description |
|---|---|---|
| event | Number |
New value for visible prop.
|
Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler.
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.