SponsorsBecome a sponsor

Popover

Popover component 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.

Popover Layout

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

<body>
    ...
    <div class="popover">
        <!-- Popover's arrow -->
        <div class="popover-arrow"></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.

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

app.popover.destroy(el)- destroy Popover 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

Popover Parameters

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

ParameterTypeDefaultDescription
elHTMLElementPopover element. Can be useful if you already have Popover element in your HTML and want to create new instance using this element
arrowbooleantrueEnables Popover arrow/corner
contentstringFull Popover HTML layout string. Can be useful if you want to create Popover element dynamically
verticalPositionstringautoForce popover vertical position, can be auto, top or bottom
backdropbooleantrueEnables Popover backdrop (dark semi transparent layer behind)
backdropUniquebooleanfalseIf enabled it creates unique backdrop element exclusively for this modal
backdropElHTMLElement
string		HTML element or string CSS selector of custom backdrop element
closeByBackdropClickbooleantrueWhen enabled, popover will be closed on backdrop click
closeByOutsideClickbooleantrueWhen enabled, popover will be closed on when click outside of it
closeOnEscapebooleanfalseWhen enabled, popover will be closed on ESC keyboard key press
animatebooleantrueWhether the Popover should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods
targetElHTMLElement
string		HTML element or string CSS selector of target element
targetXnumberVirtual target element horizontal offset from left side of the screen. Required without using real target element (targetEl)
targetYnumberVirtual target element vertical offset from top of the screen. Required without using real target element (targetEl)
targetWidthnumber0Virtual target element width (in px). Required without using real target element (targetEl)
targetHeightnumber0Virtual target element height (in px). Required without using real target element (targetEl)
containerElHTMLElement
string		Element to mount modal to (default to app root element)
onobject

Object with events handlers. For example:

var popover = app.popover.create({
  content: '<div class="popover">...</div>',
  on: {
    opened: function () {
      console.log('Popover opened')
    }
  }
})

Note that all following parameters can be used in global app parameters under popover property to set defaults for all popovers. For example:

var app = new Framework7({
  popover: {
    closeByBackdropClick: false,
  }
});

If you use auto-initialized popovers (e.g. you don't create them via app.popover.create), it is possible to pass all available popover parameters via data- attributes. For example:

<!-- Pass parameters as kebab-case data attributes -->
<div class="popover" data-close-on-escape="true" data-backdrop="false">
  ...
</div>

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:

Properties
popover.appLink to global app instance
popover.elPopover HTML element
popover.$elDom7 instance with popover HTML element
popover.backdropElBackdrop HTML element
popover.$backdropElDom7 instance with backdrop HTML element
popover.targetElPopover target HTML element
popover.$targetElDom7 instance with popover target HTML element
popover.paramsPopover parameters
popover.openedBoolean prop indicating whether popover is opened or not
Methods
popover.open(targetEl, animate)Open popover around target element. Where
  • targetEl - HTMLElement or string - target element to set popover position around this element
  • animate - boolean (by default true) - defines whether it should be opened with animation
popover.open(animate)Open popover around target element passed on popover creation. Where
  • animate - boolean (by default true) - defines whether it should be opened with animation
popover.close(animate)Close popover. Where
  • animate - boolean (by default true) - defines whether it should be closed with animation
popover.destroy()Destroy popover
popover.on(event, handler)Add event handler
popover.once(event, handler)Add event handler that will be removed after it was fired
popover.off(event, handler)Remove event handler
popover.off(event)Remove all handlers for specified event
popover.emit(event, ...args)Fire event on instance

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 (preferred to link)

  • To close popover we need to add "popover-close" class to any HTML element (preferred 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:

<!-- In data-popover attribute we specify CSS selector of popover we need to open -->
<p><a href="#" data-popover=".my-popover" class="popover-open">Open Popover</a></p>

<!-- And somewhere in DOM -->
<div class="popover my-popover">
  <div class="popover-inner">
    <!-- Link to close popover -->
    <a class="link popover-close">Close Popover</a>
  </div>
</div>

Popover Events

Popover will fire the following DOM events on popover element and events on app and popover instance:

DOM Events

EventTargetDescription
popover:openPopover Element<div class="popover">Event will be triggered when Popover starts its opening animation
popover:openedPopover Element<div class="popover">Event will be triggered after Popover completes its opening animation
popover:closePopover Element<div class="popover">Event will be triggered when Popover starts its closing animation
popover:closedPopover Element<div class="popover">Event will be triggered after Popover completes its closing animation

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.

EventArgumentsTargetDescription
openpopoverpopoverEvent will be triggered when Popover starts its opening animation. As an argument event handler receives popover instance
popoverOpenpopoverapp
openedpopoverpopoverEvent will be triggered after Popover completes its opening animation. As an argument event handler receives popover instance
popoverOpenedpopoverapp
closepopoverpopoverEvent will be triggered when Popover starts its closing animation. As an argument event handler receives popover instance
popoverClosepopoverapp
closedpopoverpopoverEvent will be triggered after Popover completes its closing animation. As an argument event handler receives popover instance
popoverClosedpopoverapp
beforeDestroypopoverpopoverEvent will be triggered right before Popover instance will be destroyed. As an argument event handler receives popover instance
popoverBeforeDestroypopoverapp

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-popover-width: 260px;
}
.ios {
  --f7-popover-border-radius: 13px;
  --f7-popover-actions-icon-size: 28px;
  --f7-popover-transition-timing-function: initial;
  --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
  --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-popover-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
  --f7-popover-border-radius: 28px;
  --f7-popover-actions-icon-size: 24px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-popover-bg-color: var(--f7-md-surface-3);
  --f7-popover-actions-label-text-color: var(--f7-md-on-surface-variant);
}

Examples

popover.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Popover</div>
      <div class="right">
        <a class="link popover-open" data-popover=".popover-menu">Popover</a>
      </div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="" class="link popover-open" data-popover=".popover-menu">Dummy Link</a>
      <a href="" class="link popover-open" data-popover=".popover-menu">Open Popover</a>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p><a data-popover=".popover-menu" class="button button-fill popover-open">Open popover on me</a></p>
      <p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta
        turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec
        malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate
        egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras
        suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <a class="popover-open"
          data-popover=".popover-menu">popover</a> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis
        vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.</p>
      <p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta
        magna magna lacinia nunc. Curabitur <a class="popover-open" data-popover=".popover-menu">popover!</a> cursus
        laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat.
        Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis
        mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque
        elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.</p>
      <p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus
        tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum
        arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis
        semper ligula. Morbi ullamcorper <a class="popover-open" data-popover=".popover-menu">one more popover</a> massa
        at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi.
        Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida
        eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse
        viverra lectus sed risus aliquet, vel accumsan dolor feugiat.</p>
    </div>
  </div>
  <div class="popover popover-menu">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="list">
        <ul>
          <li><a href="/dialog/" class="list-button popover-close">Dialog</a></li>
          <li><a href="/tabs/" class="list-button popover-close">Tabs</a></li>
          <li><a href="/panel/" class="list-button popover-close">Side Panels</a></li>
          <li><a href="/list/" class="list-button popover-close">List View</a></li>
          <li><a href="/inputs/" class="list-button popover-close">Form Inputs</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
Improve this Doc
On this page