Popover

Popover compontent is used to manage the presentation of content in a popover. You use popovers to present information temporarily. The popover remains visible until the user taps outside of the popover window or you explicitly dismiss it.

Note that is not recommended to use Popover on small screens (iPhone). On small screens you should use Action Sheet instead.

First of all let’s look on Popover layout, it is pretty simple:

Popover is highly customizable element and you can put anything inside, event another view with navigation.

Popover App Methods

Let’s look at related App methods to work with Popover:

app.popover.create(parameters)- create Popover instance

parameters - object. Object with popover parameters

Method returns created Popover’s instance

el - HTMLElement or string (with CSS Selector) or object. Popover element or Popover instance to destroy.

app.popover.get(el)- get Popover instance by HTML element

el - HTMLElement or string (with CSS Selector). Popover element.

Method returns Popover’s instance

app.popover.open(el, targetEl, animate)- opens Popover

el - HTMLElement or string (with CSS Selector). Popover element to open.
targetEl - HTMLElement or string (with CSS Selector). Target element to set popover position around this element
animate - boolean. Open Popover with animation.

Method returns Popover’s instance

app.popover.close(el, animate)- closes Popover

el - HTMLElement or string (with CSS Selector). Popover element to close.
animate - boolean. Close Popover with animation.

Method returns Popover’s instance

Now let’s look at list of available parameters we need to create Popover:

Popover Methods & Properties

So to create Popover we have to call:

var popover = app.popover.create({ /* parameters */ })

After that we have its initialized instance (like popover variable in example above) with useful methods and properties:

It is possible to open and close required popover (if you have them in DOM) using special classes and data attributes on links:

To open popover we need to add “popover-open“ class to any HTML element (prefered to link)
To close popover we need to add “popover-close“ class to any HTML element (prefered to link)
If you have more than one popover in DOM, you need to specify appropriate popover via additional data-popover=”.my-popover” attribute on this HTML element

According to above note:

Popover Events

App and Popover Instance Events

Popover instance emits events on both self instance and app instance. App instance events has same names prefixed with popover.

<body>
  ...
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
            <!-- Additional "popover-open" class to open popover on link click -->
            <!-- In data-popover attribute we specify CSS selector of popover we need to open -->
            <a class="link popover-open" href="#" data-popover=".popover-about">About</a>
          </div>
          <div class="title">Popover</div>
          <div class="right">
            <a class="link popover-open" href="#" data-popover=".popover-links">Links</a>
          </div>
        </div>
      </div>
      <div class="page-content">
        <div class="block">
          <p>
            <!-- In data-popover attribute we specify CSS selector of popover we need to open -->
            <a class="link popover-open" href="#" data-popover=".popover-about">Open About Popover</a>
          </p>
          <p>
            <!-- In data-popover attribute we specify CSS selector of popover we need to open -->
            <a class="link popover-open" href="#" data-popover=".popover-links">Open Links Popover</a>
          </p>
            <a class="link dynamic-popover" href="#">Create Dynamic Popover</a>
          </p>
        </div>
      </div>
  ...
  <!-- Popovers -->
  <div class="popover popover-about">
    <div class="popover-inner">
      <div class="block">
        <p>About</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac.</p>
      </div>
    </div>
  </div>
  <div class="popover popover-links">
    <div class="popover-inner">
      <div class="list">
        <ul>
          <li><a class="list-button item-link" href="#">Link 1</a></li>
          <li><a class="list-button item-link" href="#">Link 2</a></li>
          <li><a class="list-button item-link" href="#">Link 3</a></li>
          <li><a class="list-button item-link" href="#">Link 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  ...