The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Vue Popper

    :whale: VueJS popover component based popper.js
    Filed under 

    • 🔾39%Overall
    • 436
    • 20 days
    • 🕩104
    • 👥17


    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

    Show All