Vue-popper: Tooltip and Popover component

Vue-popper is a popover or tooltip component for vue.js. It provids popover functionalities and is based on popover.js

Let's see how we can use this awesome component.

Installation

//npm
npm install vue-popperjs --save

//yarn
yarn add vue-popperjs

Usage

<template>
  <popper
    trigger="clickToOpen"
    :options="{
      placement: 'top',
      modifiers: { offset: { offset: '0,10px' } }
    }">
    <div class="popper">
      Popper Content
    </div>

    <button slot="reference">
      Reference Element
    </button>
  </popper>
</template>

<script>
  import Popper from 'vue-popperjs';
  import 'vue-popperjs/dist/vue-popper.css';

  export default {
    components: {
      'popper': Popper
    },
  }
</script>

Props

disabled

Type: Boolean

Default: false

delay-on-mouse-over

Type: Number

Default: 10

Description: Delay in ms before showing popper during a mouse over

delay-on-mouse-out

Type: Number

Default: 10

Description: Delay in ms before hiding popper during a mouse over

append-to-body

Type: Boolean

Default: false

visible-arrow

Type: Boolean

Default: true

force-show

Type: Boolean

Default: false

trigger

Type: String

Default: hover

Optional value:

• hover - hover to open popper content
• clickToOpen - every click on the popper triggers open, only clicking outside of the popper closes it
• clickToToggle - click on the popper toggles it's visibility
• click (deprecated - same as clickToToggle)
• focus - opens popper on focus event, closes on blur.

options

Type: Object

Default: { placement: 'bottom', gpuAcceleration: false }

Description: popper.js options

data-value

Type: Any

Default: null

Description : data of popper

stop-propagation

Type: Boolean

Default: false

prevent-default

Type: Boolean

Default: false

root-class

Type: String

Default: Empty

Description : Class name for root element

Custom Events

@created

Params: context[Object]

Description: Created popper component

@show

Description: Show popover

@hide

Description: Hide popover

Interact with a live Demo on JSFiddle