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

Contributors

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]

Individuals

Organizations

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

License

FOSSA Status

MIT © Igor Ognichenko