vue-popperjs

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 contentclickToOpen - every click on the popper triggers open, only clicking outside of the popper closes itclickToToggle - click on the popper toggles it's visibilityclick (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 | | 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].

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

MIT © Igor Ognichenko