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 or use Action Sheet To Popover coversion.

Popover Layout

First of all let's look on Popover layout, it is pretty simple, just add somewhere in the end of the <body>:

<body>
    ...
    <div class="popover">
        <!-- Popover's angle arrow -->
        <div class="popover-angle"></div>
 
        <!-- Popover content -->
        <div class="popover-inner">
            <!-- Any HTML content here -->
        </div>
    </div>
</body>  

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

Open and close Popover

From HTML

It is possible to open and close required Popover using special classes and data attributes on links:

  • To open popover we need to add "open-popover" class to any HTML element (prefered to link)

  • To close popover we may add "close-popover" class to any HTML element (prefered to link)

  • If you have more than one popover in app, you need to specify appropriate popover via additional data-popover=".my-popover" attribute on this HTML element

Popover position

When we open Popover with such method (from HTML), it will be automatically positioned around element that we clicked to call this Popover.

<body>
  ...  
  <div class="navbar">
    <div class="navbar-inner">
      <!-- In data-popover attribute we specify CSS selector of popover we need to open -->
      <div class="left"><a href="#" data-popover=".popover-about" class="link open-popover">About</a></div>
      <div class="center">Popover</div>
      <div class="right"><a href="#" data-popover=".popover-links" class="link open-popover">Links</a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <!-- In data-popover attribute we specify CSS selector of popover we need to open -->
      <p><a href="#" data-popover=".popover-about" class="open-popover">Open About Popover</a></p>
      <p><a href="#" data-popover=".popover-links" class="open-popover">Open Links Popover</a></p>
    </div>
  </div>
  ...
 
  <!-- By default popover has 320px width, let's make it a bit narrow -->
  <style>
    .popover {
      width: 200px;
    }
  </style>
 
  <!-- About popover -->
  <div class="popover popover-about">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="content-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>
 
  <!-- Links popover -->
  <div class="popover popover-links">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="list-block">
        <ul>
          <li><a href="#" class="list-button item-link">Link 1</a></li>
          <li><a href="#" class="list-button item-link">Link 2</a></li>
          <li><a href="#" class="list-button item-link">Link 3</a></li>
          <li><a href="#" class="list-button item-link">Link 4</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

Using JavaScript

We can also open and close Popover with JavaScript, for this we need to look at related App methods:

myApp.popover(popover, target, , animated) - open Popover around target element

  • popover - HTMLElement or string (with CSS Selector) of Popover to open. Requred
  • target - HTMLElement or string (with CSS Selector) of target element to set popover position around this element. Requred
  • animated - boolean - Should it be opened with animation or not. Optional. By default is true
  • This method returns Popover's HTMLElement

myApp.closeModal(popover, animated) - close Popover

  • popover - HTMLElement or string (with CSS Selector). Optional. If not specified, any opened Popover will be closed
  • animated - boolean - Should it be opened with animation or not. Optional. By default is true

Popover position

When we open popover using JavaScript we need to pass target element to set popover around this target element.

<body>
  ...
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="#" class="link open-about">About</a></div>
      <div class="center">Popover</div>
      <div class="right"><a href="#" class="link open-about">Links</a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="open-about">Open About Popover</a></p>
      <p><a href="#" class="open-links">Open Links Popover</a></p>
      <p>Praesent urna mi, sodales ac dolor vitae, dictum mattis sem. Mauris a dui faucibus, condimentum arcu quis, porta felis. Sed at metus arcu. Maecenas sodales tellus risus, id <a href="#" class="open-about">About</a> nibh iaculis quis. Suspendisse dignissim ante lobortis, molestie nibh id, pharetra risus. Proin blandit neque nec nibh scelerisque, eu vulputate ipsum malesuada. Phasellus sapien diam, fermentum eget ornare in, <a href="#" class="open-links">Links</a> rutrum vel justo. Integer accumsan posuere quam.</p>
    </div>
  </div>
  ...
  <div class="popover popover-about">
    ...
  </div>
  <div class="popover popover-links">
    ...
  </div>
</body>
 
var myApp = new Framework7();
 
var $$ = Dom7;
 
// Open About popover
$$('.open-about').on('click', function () {
    var clickedLink = this;
    myApp.popover('.popover-about', clickedLink);
});
 
// Open Links popover
$$('.open-links').on('click', function () {
    var clickedLink = this;
    myApp.popover('.popover-links', clickedLink);
});          

Dynamic Popover

Framework7 allows you to create Popover dynamically by passing its HTML to related App methods:

myApp.popover(popoverHTML, target, removeOnClose) - open Popover with popoverHTML content around target element

  • popoverHTML - string. HTML string of popover
  • target - HTMLElement or string (with CSS Selector) of target element to set popover position around this element. Requred
  • removeOnClose - boolean. Optional, by default - true. If true then Popover will be removed from DOM when closed
  • This method returns dynamically created Popover's HTMLElement
<body>
  ...
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="#" class="link create-about">About</a></div>
      <div class="center">Popover</div>
      <div class="right"><a href="#" class="link create-links">Links</a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="create-about">Create About Popover</a></p>
      <p><a href="#" class="create-links">Create Links Popover</a></p>
      <p>Praesent urna mi, sodales ac dolor vitae, dictum mattis sem. Mauris a dui faucibus, condimentum arcu quis, porta felis. Sed at metus arcu. Maecenas sodales tellus risus, id <a href="#" class="create-about">About</a> nibh iaculis quis. Suspendisse dignissim ante lobortis, molestie nibh id, pharetra risus. Proin blandit neque nec nibh scelerisque, eu vulputate ipsum malesuada. Phasellus sapien diam, fermentum eget ornare in, <a href="#" class="create-links">Links</a> rutrum vel justo. Integer accumsan posuere quam.</p>
    </div>
  </div>
  ...
</body>
var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.create-about').on('click', function () {
  var clickedLink = this;
  var popoverHTML = '<div class="popover">'+
                      '<div class="popover-inner">'+
                        '<div class="content-block">'+
                          '<p>About Popover created dynamically.</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>'
  myApp.popover(popoverHTML, clickedLink);
});
 
$$('.create-links').on('click', function () {
  var clickedLink = this;
  var popoverHTML = '<div class="popover">'+
                      '<div class="popover-inner">'+
                        '<div class="list-block">'+
                          '<ul>'+
                          '<li><a href="#" class="item-link list-button">Link 1</li>'+
                          '<li><a href="#" class="item-link list-button">Link 2</li>'+
                          '<li><a href="#" class="item-link list-button">Link 3</li>'+
                          '</ul>'+
                        '</div>'+
                      '</div>'+
                    '</div>'
  myApp.popover(popoverHTML, clickedLink);
});

Popover Events

Popover has the same events as any Modal

Event Target Description
popover:open Popover Element<div class="popover"> Event will be triggered when Popover starts its opening animation
popover:opened Popover Element<div class="popover"> Event will be triggered after Popover completes its opening animation
popover:close Popover Element<div class="popover"> Event will be triggered when Popover starts its closing animation
popover:closed Popover Element<div class="popover"> Event will be triggered after Popover completes its closing animation