/vue-popper

:whale: VueJS popover component based popper.js 🇺🇦

Primary LanguageVueMIT LicenseMIT

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

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