vue-popperjs
VueJS popover component based on popper.js
Example
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 dependenciesnpm install# build dist filesnpm run build
Usage
VueJS single file (ECMAScript 2015)
Popper Content Reference Element
Browser (ES5)
Popper Content Reference Element
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:
|
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