The mobile PopOver widget represents a transient view which is displayed when the user taps on a navigational widget or area on the screen. It can contain one or more mobile views which can be navigated to, if needed. The Mobile Application automatically instantiates a mobile PopOver for each div element with a role data attribute set to popover. Alternatively, it can be initialized using jQuery plugin syntax in the containing mobile View init event handler.

The Mobile PopOver widget can be open when any mobile navigational widget (listview link item, button, tabstrip, etc.) is tapped. To do so, add data-rel="popover" attribute and a href attribute equal to the PopOver id to the navigational widget DOM element (prefixed with #, like an anchor).

<div data-role="view">
 <a data-role="button" href="#foo" data-rel="popover">Say Hello</a>

 <div data-role="popover">
     <div data-role="view">
         Hello world!
     </div>
 </div>
</div>

The Mobile PopOver widget implicitly instantiates a pane widget for its contents, which allows the containing views to navigate to each other. The pane widget behavior (including default transition, layout, etc.) may be configured from the pane configuration option.

The popover dimensions and direction can be configured from the popup configuration option.

Mobile Pane

The mobile Pane widget groups one or more mobile views within the main view application. The mobile SplitView widget allows a side by-side display of several panes. The mobile PopOver automatically instantiates a mobile Pane widget for its contents.

The mobile Pane widget acts like an embedded mobile application, with most of the application features available: support for local/remote views, default layout and transition, lading, etc. with one exception being the browser history support. Navigating within the pane will not update the history state, so deep linking to a pane state is not supported.

Navigating across panes

By default, navigational widgets will change views in the containing pane. To target another pane, use target data attribute set to the id of the pane. To change views in the mobile application, use data-target="_top".

<div data-role="splitview" id="main">
   <div data-role="pane" id="side-pane">
     <div data-role="view">
        <a data-role="button" href="#bar" data-target="main-pane">Bar (main pane)</a>
        <a data-role="button" href="#baz" data-target="_top">Baz (application)</a>
     </div>
   </div>

   <div data-role="pane" id="main-pane">
     <div data-role="view" id="foo">
        Foo
     </div>
     <div data-role="view" id="bar">
        Bar
     </div>
   </div>
 </div>

 <div data-role="view" id="baz">
    <a data-role="button" href="#main">Go back to splitview</a>
 </div>