View Source Improve this doc

ons-popover

A component that displays a popover next to an element.

Usage # 

<script>
ons.ready(function() {
  ons.createPopover('popover.html').then(function(popover) {
    popover.show('#mybutton');   
  });
});
</script>

<script type="text/ons-template" id="popover.html">
  <ons-popover cancelable>
    <p style="text-align: center; opacity: 0.5;">This popover will choose which side it's displayed on automatically.</p>
  </ons-popover>
</script>

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

Attributes #

Name Type
Default Value		 Description
var String Variable name to refer this popover. Optional
modifier String The appearance of the popover. 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
cancelable If this attribute is set the popover can be closed by tapping the background or by pressing the back button. Optional
disabled If this attribute is set the popover is disabled. Optional
animation String The animation used when showing an hiding the popover. Can be either "none" or "fade". Optional
mask-color Color Color of the background mask. Default is "rgba(0, 0, 0, 0.2)". Optional
ons-preshow Expression Allows you to specify custom behavior when the "preshow" event is fired. Optional
ons-prehide Expression Allows you to specify custom behavior when the "prehide" event is fired. Optional
ons-postshow Expression Allows you to specify custom behavior when the "postshow" event is fired. Optional
ons-posthide Expression Allows you to specify custom behavior when the "posthide" event is fired. Optional
ons-destroy Expression Allows you to specify custom behavior when the "destroy" event is fired. Optional

Preset Modifiers #

Modifier Description
android Display an Android style popover.

Methods Summary #

Signature Description
show(target, [options]) Open the popover and point it at a target. The target can be either an event, a css selector or a DOM element..
hide([options]) Close the popover.
isShown() Returns whether the popover is visible or not.
destroy() Destroy the popover and remove it from the DOM tree.
setCancelable(cancelable) Set whether the popover can be canceled by the user when it is shown.
isCancelable() Returns whether the popover is cancelable or not.
setDisabled(disabled) Disable or enable the popover.
isDisabled() Returns whether the popover is disabled or enabled.
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that's only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Events Summary #

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.

Methods

show(target, [options]) #

Open the popover and point it at a target. The target can be either an event, a css selector or a DOM element..

Parameters
Name Type Description
target String|Event|HTMLElement Target element. Can be either a CSS selector, an event object or a DOM element.
options Object Parameter object.
options.animation String Animation name. Available animations are "fade" and "none".

hide([options]) #

Close the popover.

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "fade" and "none".

isShown(): Boolean #

Returns whether the popover is visible or not.

Returns: true if the popover is visible.

destroy() #

Destroy the popover and remove it from the DOM tree.

setCancelable(cancelable) #

Set whether the popover can be canceled by the user when it is shown.

Parameters
Name Type Description
cancelable Boolean If true the popover will be cancelable.

isCancelable(): Boolean #

Returns whether the popover is cancelable or not.

Returns: true if the popover is cancelable.

setDisabled(disabled) #

Disable or enable the popover.

Parameters
Name Type Description
disabled Boolean If true the popover will be disabled.

isDisabled(): Boolean #

Returns whether the popover is disabled or enabled.

Returns: true if the popover is disabled.

on(eventName, listener) #

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

once(eventName, listener) #

Add an event listener that's only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

off(eventName, [listener]) #

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

Events

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.

Discussion #