@knowbly/vue-popperjs

vue-popperjs

VueJS popover component based on popper.js

Example

jsFiddle

Install

CDN

Recommended: https://unpkg.com/vue-popperjs, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-popperjs/

NPM

npm install vue-popperjs --save

Yarn

yarn add vue-popperjs

Bower

bower install vue-popperjs --save

Development Setup

# install dependencies
npm install

# build dist files
npm run build

Usage

VueJS single file (ECMAScript 2015)

<template>
  <popper
    trigger="click"
    :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> 

Browser (ES5)

<link rel="stylesheet" href="vue-popper.css">
<script type="text/javascript" src="popper.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-popper.js"></script>

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

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

<script type="text/javascript">
  new Vue({
    el: '#app',
    components: {
      'popper': VuePopper
    }
  });
</script>

Props

Props	Type	Default	Description
disabled	Boolean	false
delay-on-mouse-over	Number	10	Delay in ms before showing popper during a mouse over
delay-on-mouse-out	Number	10	Delay in ms before hiding popper during a mouse out
append-to-body	Boolean	false
visible-arrow	Boolean	true
force-show	Boolean	false
trigger	String	hover	Optional value: hover or click
content	String	null
enter-active-class	String	null
leave-active-class	String	null
boundaries-selector	String	null
transition	String	empty
options	Object	{ placement: 'bottom', gpuAcceleration: false }	popper.js options
data-value	Any	null	data of popper
stop-propagation	Boolean	false
prevent-default	Boolean	false

Events

Name	Params	Description
created	context[Object]	Created popper component
show		Show popover
hide		Hide popover
document-click

Other my Vue JS plugins

Project	Status	Description
vue-ls		Vue plugin for work with local storage, session storage and memory storage from Vue context
vue-gallery		Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers

License

MIT © Igor Ognichenko