vue-popperjs

Greenkeeper badge 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 npm Vue plugin for work with local storage, session storage and memory storage from Vue context
vue-gallery npm Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers

License

FOSSA Status

MIT © Igor Ognichenko