Popover 🔗

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Example 🔗

Note: Popovers whose both title and content are zero-length are never displayed.

Click the button below to toggle popover:

<btn type="primary" id="btn">Popover</btn>
<popover title="Title" target="#btn">
  <template slot="popover">
    <h1>Hello world!</h1>
  </template>
</popover>
<!-- popover-example.vue -->

Trigger target 🔗

Order to decide the popover trigger:

  1. Use target if exist.
  2. Use element in default slot with data-role="trigger" attribute if exist.
  3. Use the first element present in default slot.

A target can be:

  • Selector that can be recognized by querySelect.
  • Reference to Element.
  • Reference to Component.

Directive 🔗

You can also simply use popovers via v-popover directive:

<btn v-popover="{title:'Title', content:'Popover content'}" type="primary">Popover</btn>
<!-- popover-directive.vue -->

With empty title 🔗

If you don't want the title of popover, just leave the title prop unset or blank.

<btn v-popover="{content:'Popover without a title'}" type="primary">Popover</btn>
<!-- popover-with-empty-title.vue -->

Placements 🔗

Supported placements:

  • top (Default)
  • right
  • bottom
  • left
<btn v-popover.left="{title:'Title', content:'Popover on left'}" type="primary">Left</btn>
<btn v-popover.top="{title:'Title', content:'Popover on top'}" type="primary">Top</btn>
<btn v-popover.bottom="{title:'Title', content:'Popover on bottom'}" type="primary">Bottom</btn>
<btn v-popover.right="{title:'Title', content:'Popover on right'}" type="primary">Right</btn>
<!-- popover-placements.vue -->

Auto placement 🔗

Popover will try to find the best placement for displaying while auto-placement is set to true (by default) base on the default placement setting. Useful while there does not have enough space to show the entire popover content.

auto-placement try order: right -> bottom -> left -> top, and use the set one if none of these matched.

Viewport 🔗

Keeps the popover within the bounds of this element.

<div id="popover-viewport" style="display: inline-block; padding: 20px; background-color: #eee">
  <btn v-popover="{title:'Title', content:'Popover auto', viewport:'#popover-viewport'}" type="primary">Auto</btn>
  <btn v-popover.left="{title:'Title', content:'Popover on left', viewport:'#popover-viewport'}" type="primary">Left</btn>
  <btn v-popover.top="{title:'Title', content:'Popover on top', viewport:'#popover-viewport'}" type="primary">Top</btn>
  <btn v-popover.bottom="{title:'Title', content:'Popover on bottom', viewport:'#popover-viewport'}" type="primary">Bottom</btn>
  <btn v-popover.right="{title:'Title', content:'Popover on right', viewport:'#popover-viewport'}" type="primary">Right</btn>
  <btn v-popover="{title:'Title', content:'Popover auto', viewport:'#popover-viewport'}" type="primary">Auto</btn>
</div>
<!-- popover-viewport.vue -->

Triggers 🔗

Supported triggers:

  • hover show on mouseenter, hide on mouseleave.
  • focus show on focus, hide on blur.
  • hover-focus combination of hover and focus trigger.
  • click toggle on trigger click.
  • outside-click (Default) same as click, but not close on popover click and close on outside click.
<btn v-popover="{title:'Title', content:'Popover content'}" type="primary">Outside-Click (Default)</btn>
<btn v-popover.hover="{title:'Title', content:'Popover content'}" type="primary">Hover</btn>
<btn v-popover.focus="{title:'Title', content:'Popover content'}" type="primary">Focus</btn>
<btn v-popover.hover-focus="{title:'Title', content:'Popover content'}" type="primary">Hover-Focus</btn>
<btn v-popover.click="{title:'Title', content:'Popover content'}" type="primary">Click</btn>
<!-- popover-triggers.vue -->

Manual trigger 🔗

Set trigger prop to manual to disable all the event listeners, and controls popover show / hide only by v-model change.


<template>
  <section>
    <popover title="Title" trigger="manual" v-model="show">
      <btn>You Can't Trigger Popover Here...</btn>
      <template slot="popover">
        <p>Popover content</p>
      </template>
    </popover>
    <hr/>
    <btn type="primary" @click="show = !show">Toggle Popover</btn>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        show: false
      }
    }
  }
</script>
<!-- popover-manual-trigger.vue -->

Disable popover 🔗

Set enable prop to false to disable a popover.

<popover title="Title" :enable="false">
  <btn type="primary">Disabled Popover</btn>
  <template slot="popover">
    <h1>Hello world!</h1>
  </template>
</popover>
<!-- popover-disable.vue -->

Change the display duration 🔗

Set show-delay/hide-delay (ms), to delay the showing/hiding of the popover.

<popover title="Title" :hideDelay='1000' :showDelay='2000' trigger='hover'>
  <btn type="primary">Hover</btn>
  <template slot="popover">
    <h1>Hello world!</h1>
  </template>
</popover>
<!-- popover-delay.vue -->

API Reference 🔗

Popover 🔗

Props 🔗

Name Type Default Required Description
v-model Boolean Show / hide the popover.
target Popover trigger, can be a select or reference to Element / Component.
tag String span The HTML tag that render the component.
title String The popover title.
content String The popover content text. Use popover slot instead if you need full control.
enable Boolean true Enable the popover.
enterable Boolean true Whether mouse can enter the popover.
placement String top The popover placement, support top / bottom / left / right.
auto-placement Boolean true Try to auto adjust the placement if the set one does not have enough space to show.
trigger String outside-click The popover trigger event, support hover / focus / hover-focus / click / outside-click / manual
append-to String body Element selector that the popover append to.
transition-duration Number 150 The popover show / hide transition time in ms.
show-delay Number 0 (0.30.0+) Delay showing the Popover (ms).
hide-delay Number 0 (0.30.0+) Delay hidding the Popover (ms).
viewport String or Function (0.31.0+) Keeps the popover within the bounds of this element. Example: viewport: '#viewport'. If a function is given, it is called with the triggering element DOM node as its only argument.
custom-class String (0.33.0+) Apply a custom css class to the popover.

Slots 🔗

Name Description
popover Replace as the popover body.
default Replace as the rest of the component (e.g. trigger stuffs).

Events 🔗

Name Params Description
show Fire after popover show.
hide Fire after popover hide.

Directive 🔗

The binding value will be the title and text content of corresponding popover.

Simplest Usage

v-popover="{title:'Title', content:'Popover content'}"

Placements Examples

v-popover.left="{title:'Title', content:'Popover content'}"
v-popover.right="{title:'Title', content:'Popover content'}"

Triggers Examples

v-popover.hover="{title:'Title', content:'Popover content'}"
v-popover.click="{title:'Title', content:'Popover content'}"

Unenterable

v-popover.unenterable="{title:'Title', content:'Popover content'}"

Custom append-to

v-popover:arg="{title:'Title', content:'Popover content'}"

arg is the ID (without prefix #) of the element to append to, leave it empty to use default value body.

Combination

v-popover.left.hover="{title:'Title', content:'Popover content'}"
v-popover:some-id.right.click="{title:'Title', content:'Popover content'}"

Caught a mistake or want to contribute to the documentation? Edit this page on Github!