Popover Vue Component

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.

Popover Vue component represents Popover component.

Popover Components

There are following components included:

  • f7-popover

Popover Properties

Prop Type Description
<f7-popover> properties
opened boolean Allows to open/close Popover and set its initial state
target string
object
HTML element or string CSS selector of Popover target element

Popover Methods

<f7-popover> methods
.open(target, animate) Open popover around target element
.close(animate) Close popover

Popover Events

Event Description
<f7-popover> events
popover:open Event will be triggered when Popover starts its opening animation
popover:opened Event will be triggered after Popover completes its opening animation
popover:close Event will be triggered when Popover starts its closing animation
popover:closed Event will be triggered after Popover completes its closing animation

Open And Close Popover

You can control Popover state, open and closing it:

  • using Popover API
  • by passing true or false to its opened prop
  • by clicking on Link or Button with relevant popover-open property (to open it) and popover-close property to close it

Access To Popover Instance

You can access Popover initialized instance by accessing .f7Popover component's property.

Examples

<!-- Popover -->
<f7-popover>
  <!-- Popover content goes here -->
</f7-popover>

Renders to:

<!-- Popover -->
<div class="popover">
  <div class="popover-angle"></div>
  <div class="popover-inner">
    <!-- Popover content goes here -->
  </div>
</div>