Skip to the content.


Greenkeeper badge VueJS popover component based on popper.js





Recommended:, 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


npm install vue-popperjs --save


yarn add vue-popperjs


bower install vue-popperjs --save

Development Setup

# install dependencies
npm install

# build dist files
npm run build


VueJS single file (ECMAScript 2015)

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

    <button slot="reference">
      Reference Element

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

  export default {
    components: {
      'popper': Popper

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">
      placement: 'top',
      modifiers: { offset: { offset: '0,10px' } }
    <div class="popper">
      Popper Content

    <button slot="reference">
      Reference Element

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


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:
<ul><li>hover - hover to open popper content</li><li>clickToOpen - every click on the popper triggers open, only clicking outside of the popper closes it</li><li>clickToToggle - click on the popper toggles it’s visibility</li><li>click (deprecated - same as clickToToggle)</li><li>focus - opens popper on focus event, closes on blur.</li>
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  
root-class String empty Class name for root element


| 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


Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]



Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]


FOSSA Status

MIT © Igor Ognichenko