VueJS popover component based on popper.js
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 install vue-popperjs --save
yarn add vue-popperjs
bower install vue-popperjs --save
# install dependencies
npm install
# build dist files
npm run build
<template>
<popper trigger="click" :options="{placement: 'top'}">
<div class="popper">
Popper Content
</div>
<button slot="reference">
Reference Element
</button>
</popper>
</template>
<script>
import Popper from 'vue-popperjs';
import 'vue-popperjs/dist/css/vue-popper.css';
export default {
components: {
'popper': Popper
},
}
</script>
<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="click" :options="{placement: 'top'}">
<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 | 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 or click |
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 |
Name | Params | Description |
---|---|---|
created | context[Object] | Created popper component |
show | Show popover | |
hide | Hide popover | |
document-click |
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 |
MIT © Igor Ognichenko