trendingtechnology / vue-popper

:whale: VueJS popover component based popper.js

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'}">
    <div class="popper">
      Popper Content
    </div>

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

<script>
  import Popper from 'vue-popperjs';
  import 'vue-popperjs/dist/css/vue-popper.css';
  
  export default {
    components: {
      'popper': Popper
    },
  }
</script> 

Browser (ES5)

<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>
<script type="text/javascript" src="vue-popper.css"></script>

<div id="app">
  <popper trigger="click" :options="{placement: 'top'}">
    <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-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

Events

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

License

MIT © Igor Ognichenko