Titanium.UI.iPad.Popover

A Popover is used to manage the presentation of content in a popover.

A popover is created using the Titanium.UI.iPad.createPopover method or <Popover> Alloy element.

Popovers are used to present information temporarily, but in a way that does not take over the entire screen in the way that a modal view does. The popover content is layered on top of the existing content in a special type of window. The popover remains visible until the user taps outside of the popover window or it is explicitly dismissed.

Do not add top-level view containers, such as a SplitWindow or TabGroup, to a popover. Adding top-level view containers may have unintended side effects. See the contentView property for more information.

Extends: Titanium.UI.View · Since: 1.2.0, 9.2.0 · Platforms: ipad, macos

Properties #

accessibilityDisableLongPress#

extendedcreation only

Type: Boolean

Boolean value to remove the long press notification for the device's accessibility service.

Will disable the "double tap and hold for long press" message when selecting an item.

apiName#

extended

Type: String

The name of the API that this proxy corresponds to.

The value of this property is the fully qualified name of the API. For example, Button
returns Ti.UI.Button.

arrowDirection#

Type: Number

Indicates the arrow direction of the popover.

Use this property to indicate the popover arrows to use. You can bitwise-OR the constant
values together.

Do not set this property to Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_UNKNOWN.

backgroundColor#

creation only

Type:

Sets the background color of the popover.

It is recommended to set this property to colorize the whole popover instead of only
its content view.

bubbleParent#

extended

Type: Boolean

Indicates if the proxy will bubble an event to its parent.

Some proxies (most commonly views) have a relationship to other proxies, often
established by the add() method. For example, for a button added to a window, a
click event on the button would bubble up to the window. Other common parents are
table sections to their rows, table views to their sections, and scrollable views
to their views. Set this property to false to disable the bubbling to the proxy's parent.

contentView#

Type: Titanium.UI.View

View to use for the popover content. Must be set before calling the show() method.

Set this property to any Titanium.UI.View object, including a Titanium.UI.Window or
Titanium.UI.NavigationWindow object.

This property does not support the Titanium.UI.iOS.SplitWindow or Titanium.UI.TabGroup objects.

When this property is set to a valid object, the popover does not include the navigation
controller unless it is set to a Titanium.UI.NavigationWindow object.

In an Alloy application, you can specify this property as a <ContentView> child element
of the <Popover> element:

<Alloy>
    <Popover>
        <ContentView>
            <Window title="Popover">
                <Label>Popover!</Label>
            </Window>
        </ContentView>
    </Popover>
</Alloy>

elevation#

extended

Type: Number

Base elevation of the view relative to its parent in pixels.

The elevation of a view determines the appearance of its shadow.
Higher elevations produce larger and softer shadows.

Note: The elevation property only works on Titanium.UI.View objects.
Many Android components have a default elevation that cannot be modified.
For more information, see
Google design guidelines: Elevation and shadows.

filterTouchesWhenObscured#

extended

Type: Boolean

Discards touch related events if another app's system overlay covers the view.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a
system overlay to intercept touch events in your app or to trick the end-user to tap on UI
in your app intended for the overlay.

Setting this property to true causes touch related events (including "click") to not be fired
if a system overlay overlaps the view.

height#

extended

Type: Number, String

View height, in platform-specific units.

Defaults to: If undefined, defaults to either Titanium.UI.FILL or Titanium.UI.SIZE
depending on the view. See "View Types and Default Layout Behavior" in
Transitioning to the New UI Layout System.

Can be either a float value or a dimension string (for example, '50%' or '40dp').
Can also be one of the following special values:

Titanium.UI.SIZE. The view should size itself to fit its contents.
Titanium.UI.FILL. The view should size itself to fill its parent.
'auto'. Represents the default sizing behavior for a given type of
view. The use of 'auto' is deprecated, and should be replaced with the SIZE or
FILL constants if it is necessary to set the view's behavior explicitly.

This is an input property for specifying the view's height dimension. To determine the
view's size once rendered, use the rect or
size properties.

hiddenBehavior#

extended

Type: Number

Sets the behavior when hiding an object to release or keep the free space

If setting hiddenBehavior to Titanium.UI.HIDDEN_BEHAVIOR_GONE it will automatically release the space the view occupied.
For example: in a vertical layout the views below the object will move up when you hide
an object with hiddenBehavior:Titanium.UI.HIDDEN_BEHAVIOR_GONE.

Titanium.UI.HIDDEN_BEHAVIOR_INVISIBLE. Keeps the space and just hides the object (default).
Titanium.UI.HIDDEN_BEHAVIOR_GONE. Releases the space and hides the object.

Defaults to Titanium.UI.HIDDEN_BEHAVIOR_INVISIBLE.

horizontalMotionEffect#

extended

Type: MinMaxOptions

Adds a horizontal parallax effect to the view

Note that the parallax effect only happens by tilting the device so results can not be seen on Simulator.
To clear all motion effects, use the Titanium.UI.clearMotionEffects method.

extended

Type: String

The default text to display in the control's tooltip.

Assigning a value to this property causes the tool tip to be displayed for the view.
Setting the property to null cancels the display of the tool tip for the view.
Note: This property is only used for apps targeting macOS Catalyst.

touchFeedback#

extended

Titanium.UI.SIZE. The view should size itself to fit its contents.
Titanium.UI.FILL. The view should size itself to fill its parent.
'auto'. Represents the default sizing behavior for a given type of
view. The use of 'auto' is deprecated, and should be replaced with the SIZE or
FILL constants if it is necessary to set the view's behavior explicitly.

This is an input property for specifying the view's width dimension. To determine
the view's size once rendered, use the rect or
size properties.

Methods #

addEventListener #

extended

Adds the specified callback as an event listener for the named event.

Parameters:

Name	Type	Summary	Optional
`name`	`String`	Name of the event.	No
`callback`	`Callback<Titanium.Event>`	Callback function to invoke when the event is fired.	No

applyProperties #

extended

Applies the properties to the proxy.

Properties are supplied as a dictionary. Each key-value pair in the object is applied to the proxy such that
myproxy[key] = value.

Parameters:

Name	Type	Summary	Optional
`props`	`Dictionary`	A dictionary of properties to apply.	No

clearMotionEffects #

extended

Removes all previously added motion effects.

Use this method together with Titanium.UI.horizontalMotionEffect and Titanium.UI.verticalMotionEffect.

fireEvent #

extended

Fires a synthesized event to any registered listeners.

Parameters:

Name	Type	Summary	Optional
`name`	`String`	Name of the event.	No
`event`	`Dictionary`	A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.	Yes

getViewById #

extended

Returns the matching view of a given view ID.

Parameters:

Name	Type	Summary	Optional
`id`	`String`	The ID of the view that should be returned. Use the `id` property in your views to enable it for indexing in this method.	No

Returns: Titanium.UI.View

hide #

Hides the popover.

Parameters:

Name	Type	Summary	Optional
`options`	`AnimatedOptions`	Display properties to use when hiding the popover. Note that the default here is equivalent to passing in `{ animated: false }`	Yes

insertAt #

extended

Inserts a view at the specified position in the children array.

Useful if the layout property is set to horizontal or vertical.

Parameters:

Name	Type	Summary	Optional
`params`	`ViewPositionOptions`	Pass an object that specifies the view to insert and optionally at which position (defaults to end)	No

removeEventListener #

extended

Removes the specified callback as an event listener for the named event.

Multiple listeners can be registered for the same event, so the
callback parameter is used to determine which listener to remove.

When adding a listener, you must save a reference to the callback function
in order to remove the listener later:

var listener = function() { Ti.API.info("Event listener called."); }
window.addEventListener('click', listener);

To remove the listener, pass in a reference to the callback function:

window.removeEventListener('click', listener);

Parameters:

Name	Type	Summary	Optional
`name`	`String`	Name of the event.	No
`callback`	`Callback<Titanium.Event>`	Callback function to remove. Must be the same function passed to `addEventListener`.	No

show #

Displays the popover.

Parameters:

Name	Type	Summary	Optional
`options`	`ShowPopoverParams`	Display properties to use when displaying the popover. Note that the default here is to be animated.	No

stopAnimation #

extended

Stops a running animation.

Stops a running view Animation.

Events #

hide #

Fired when the popover is hidden.

rotate #

extended

Fired when the device detects a two finger rotation.

This event is fired when doing a two finger rotation and returning the angle.
The event occurs continuously until a finger is lifted again.

Event Properties:

Name	Type	Summary
`rotate`	`Number`	Rotation in degrees.

Examples #

Simple Popover with a Title and Right Button

In this example, we create a simple popover and position it near the button.

var win = Ti.UI.createWindow({backgroundColor: 'white'});

var button = Ti.UI.createButton({title: 'Open Popover!'});
button.addEventListener('click', function(e){
    popover.show({ view: button });
})
win.add(button);

var rightButton = Ti.UI.createButton({title: 'Robin'});
rightButton.addEventListener('click', function(e){
    alert("But green's the color of spring.");
});

var contentWindow = Ti.UI.createWindow({
    rightNavButton: rightButton,
    title: 'Kermit'
});
contentWindow.add(Ti.UI.createLabel({text: "It's not easy being green."}));

var popover = Ti.UI.iPad.createPopover({
    backgroundColor: 'green',
    contentView: Ti.UI.createNavigationWindow({
        width: 250,
        height: 100,
        window: contentWindow
    })
});

win.open();

Alloy XML Markup

Previous example as an Alloy project. `app/views/index.xml`:

<Alloy>
    <Window>
        <Button id="button" onClick="openPopover">Open Popover!</Button>
    </Window>
</Alloy>

function openPopover() {
    var popover = Alloy.createController('popover').getView();
    popover.show({view:$.button});
};

$.index.open();

<Alloy>
    <Popover backgroundColor='green'>
        <ContentView>
            <NavigationWindow height='100' width='250'>
                <Window title='Kermit'>
                    <RightNavButton onClick="showAlert" title="Robin" />
                    <Label>It's not easy being green.</Label>
                </Window>
            </NavigationWindow>
        </ContentView>
    </Popover>
</Alloy>

function showAlert(e) {
    alert('But green is the color of spring.');
};

// Prior to Alloy 1.1.0, the rightNavButton property was set in the controller.
// var button = Ti.UI.createButton({title: 'Robin'});
// button.addEventListener('click', showAlert);
// $.popover.rightNavButton = button;

Notificationchannels

Launchoptionstype

Notificationparams

Usernotificationattachment

Usernotificationsettings

Mediascannerresponse

Clipboarditemstype

Systemimageparameters

Titanium.UI.iPad.Popover ​

Properties #

accessibilityDisableLongPress#

apiName#

arrowDirection#

backgroundColor#

bubbleParent#

contentView#

elevation#

filterTouchesWhenObscured#

height#

hiddenBehavior#

horizontalMotionEffect#

id#

keepHardwareMode#

lifecycleContainer#

passthroughViews#

previewContext#

rotation#

rotationX#

rotationY#

scaleX#

scaleY#

tooltip#

touchFeedback#

touchFeedbackColor#

transitionName#

translationX#

translationY#

translationZ#

verticalMotionEffect#

width#

Methods #

addEventListener #

applyProperties #

clearMotionEffects #

Titanium.UI.iPad.Popover