<Popover />

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. Another common way to use the popover is to display a menu when a button on the screen is tapped.

Tutorial

Popover

The Popover 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.

The popover will automatically alter its style based on the platform. On Android it will be displayed as a Material Design component.

To show or hide a popover the isOpen property is used. To determine which component it should visually point to, the getTarget property must be set to a function that returns a reference either to an React component or a DOM element.

Props

Name Type Default Value Description
getTarget function This function should return react component or a domnode that the popover is showing on. Required.
onCancel function Called only if isCancelable is true. It will be called after tapping the background or by pressing the back button on Android devices. Optional.
isOpen bool Indicates whether the dialog is open and shown. Required.
isCancelable bool

Specifies whether the dialog is cancelable or not. A cancelable dialog will call onCancel when tapping the background or or pressing the back button on Android devices

Optional.
isDisabled bool Specifies whether the dialog is disabled. Optional.
animation string The animation used when showing and hiding the dialog. Can be either "none" or "default". Optional.
modifier string The appearance of the dialog. Optional.
maskColor string Color of the background mask. Default is “rgba(0, 0, 0, 0.2)” Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
onPreShow function Called just before the alert dialog is displayed. Optional.
onPostShow function Called just after the alert dialog is displayed. Optional.
onPreHide function Called just before the alert dialog is hidden. Optional.
onPostHide function Called just after the alert dialog is hidden. Optional.
onDeviceBackButton function Custom handler for device back button. Optional.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter 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.