# Titanium.UI.iPad.Popover

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

- Source: https://titaniumsdk.com/docs/sdk/13.0.1/Titanium.UI.iPad.Popover
- Titanium SDK version: 13.0.1
- Kind: view
- Platforms: iPad, macOS
- Since: Titanium SDK iPad 1.2.0, macOS 9.2.0
- Extends: Titanium.UI.View
- Inheritance: Titanium.UI.View > Titanium.Proxy

A popover is created using the [Titanium.UI.iPad.createPopover](https://titaniumsdk.com/docs/sdk/Titanium.UI.iPad.md#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](https://titaniumsdk.com/docs/sdk/Titanium.UI.iPad.Popover.md#contentView)
property for more information.

## Example: Simple Popover with a Title and Right Button

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

``` js
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();
```

## Example: Alloy XML Markup

Previous example as an Alloy project.

`app/views/index.xml`:
``` xml
<Alloy>
    <Window>
        <Button id="button" onClick="openPopover">Open Popover!</Button>
    </Window>
</Alloy>
```

`app/controllers/index.js`:
``` js
function openPopover() {
    var popover = Alloy.createController('popover').getView();
    popover.show({view:$.button});
};

$.index.open();
```

`app/views/popover.xml`:
``` xml
<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>
```

`app/controllers/popover.js`:
``` js
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;
```

## Properties

### arrowDirection

- Type: Number
- Platforms: iPad, macOS

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](https://titaniumsdk.com/docs/sdk/Titanium.UI.iPad.md#POPOVER_ARROW_DIRECTION_UNKNOWN).

Accepts: `Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_ANY`, `Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN`, `Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_LEFT`, `Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT`, `Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_UP`

### backgroundColor

- Platforms: iPad, macOS
- Since: Titanium SDK 5.2.0
- Default: `undefined (behaves as transparent)`

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.

### contentView

- Type: Titanium.UI.View
- Platforms: iPad, macOS
- Since: Titanium SDK 3.2.0

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

Set this property to any [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md) object, including a [Titanium.UI.Window](https://titaniumsdk.com/docs/sdk/Titanium.UI.Window.md) or
[Titanium.UI.NavigationWindow](https://titaniumsdk.com/docs/sdk/Titanium.UI.NavigationWindow.md) object.

This property does not support the [Titanium.UI.iOS.SplitWindow](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.SplitWindow.md) or [Titanium.UI.TabGroup](https://titaniumsdk.com/docs/sdk/Titanium.UI.TabGroup.md) 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](https://titaniumsdk.com/docs/sdk/Titanium.UI.NavigationWindow.md) object.

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

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

### passthroughViews

- Type: Array<Titanium.UI.View>
- Platforms: iPad, macOS

Passthrough views to use when the popover is shown.

Specify view objects that the user can interact with while the popover is open. While
interacting with these view, the popover will not be dismissed.

## Methods

### hide

- Platforms: iPad, macOS

Hides the popover.

Parameters:

- `options` (AnimatedOptions, optional): Display properties to use when hiding the popover. Note that the default here is equivalent to passing in `{ animated: false }` Default: `{ animated: false }`.

### show

- Platforms: iPad, macOS

Displays the popover.

Parameters:

- `options` (ShowPopoverParams): Display properties to use when displaying the popover. Note that the default here is to be animated.

## Events

### hide

- Platforms: iPad, macOS

Fired when the popover is hidden.

## Inherited members

17 members are inherited. Each is documented on the type that declares it.

- [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/13.0.1/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `removeEventListener`
- [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/13.0.1/Titanium.UI.View.md): `clearMotionEffects`, `getViewById`, `height`, `horizontalMotionEffect`, `id`, `insertAt`, `rotate`, `rotation`, `tooltip`, `verticalMotionEffect`, `width`

---

- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.