Awesome

vue-popperjs

VueJS popover component based on <a href="https://popper.js.org/">popper.js</a>

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="clickToOpen"
    :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="clickToOpen"
    :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: <br><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

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

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute]. <a href="https://github.com/RobinCK/vue-popper/graphs/contributors"><img src="https://opencollective.com/vue-popper/contributors.svg?width=890&button=false" /></a>

Financial Contributors

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

Individuals

Organizations

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