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.

Usage example

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

Renders to:

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

Properties

Popover component has no any properties

Methods

.open(target, animated)	Open popover around target element
.close(animated)	Close popover

Events

Event	Description
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 its JavaScript API
• by clicking on Link or Button with relevant open-popover property (to open it) and close-popover property to close it