Awesome Open Source
Awesome Open Source


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:
  • 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.
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

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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
vue (4,195
vuejs (1,102
vue-component (98
popover (50