Vue 2 Reference > v-ons-popover

v-ons-popover

A component that displays a popover next to an component. The popover can be used to display extra information about a component or a tooltip. To use the component it can either be attached directly to the <body> component 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.

Tutorial

Popover

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 sync modifier can be used.

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).

See also

Props

Name Type Description
cancelable Boolean If this attribute is set the popover can be closed by tapping the background or by pressing the back button. Optional.
cover-target Boolean If set the popover will cover the target on the screen. Optional.
direction String

A space separated list of directions. If more than one direction is specified, it will be chosen automatically. Valid directions are "up", "down", "left" and "right".

Optional.
mask-color Color Color of the background mask. Default is "rgba(0, 0, 0, 0.2)". Optional.
modifier String The appearance of the popover. Optional.
options.animation String The animation used when showing an hiding the popover. Can be either "none", "default", "fade-ios" or "fade-md". Optional.
options.animationOptions Expression Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}. Optional.
target String Specifies the ID of the default component for the popover. Optional.
target Ref|String|Event|HTMLElement Target component. Can be either a Vue component reference, a CSS selector, an event object or a DOM component. It can also be provided as options.target. Optional.
visible Boolean Whether the popover is visible or not. Optional.
visible Boolean Specify the visibility of the component. Optional.

Events

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.
preshow

Fired just before the popover is displayed.

Parameters
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.
postshow

Fired just after the popover is displayed.

Parameters
Name Type Description
event Object Event object.
event.popover Object Component object.
prehide

Fired just before the popover is hidden.

Parameters
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.
posthide

Fired just after the popover is hidden.

Parameters
Name Type Description
event Object Event object.
event.popover Object Component object.
dialogcancel

Fired when the popover is canceled.

Parameters
Name Type Description
update:visible

Fired right after user interaction. Useful to update visible prop.

Parameters
Name Type Description
event Number New value for visible prop.
deviceBackButton

Fired on device back button. Default behavior is hiding the component if it is cancelable. Otherwise, calls parent handler.

Parameters
Name Type Description
event Object Event object.
event.preventDefault Function Avoids the default behavior.
event.callParentHandler Function Runs the handler for the immediate parent that supports device back button.

Need Help?

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.