Vue-popper: Tooltip and Popover component
Vue-popper is a popover or tooltip component for vue.js. It provids popover functionalities and is based on popover.js
Let's see how we can use this awesome component.
Installation
//npm
npm install vue-popperjs --save
//yarn
yarn add vue-popperjs
Usage
<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>
Props
disabled
Type: Boolean
Default: false
delay-on-mouse-over
Type: Number
Default: 10
Description: Delay in ms before showing popper during a mouse over
delay-on-mouse-out
Type: Number
Default: 10
Description: Delay in ms before hiding popper during a mouse over
append-to-body
Type: Boolean
Default: false
visible-arrow
Type: Boolean
Default: true
force-show
Type: Boolean
Default: false
trigger
Type: String
Default: 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.
options
Type: Object
Default: { placement: 'bottom', gpuAcceleration: false }
Description: popper.js options
data-value
Type: Any
Default: null
Description : data of popper
stop-propagation
Type: Boolean
Default: false
prevent-default
Type: Boolean
Default: false
root-class
Type: String
Default: Empty
Description : Class name for root element
Custom Events
@created
Params: context[Object]
Description: Created popper component
@show
Description: Show popover
@hide
Description: Hide popover
Interact with a live Demo on JSFiddle