vue-popperjs

VueJS popover component based on popper.js

Example

jsFiddle

Install

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

`` bash
npm install vue-popperjs --save
`

#### Yarn

` bash
yarn add vue-popperjs
`

#### Bower

` bash
bower install vue-popperjs --save
`

Development Setup

` bash


install dependencies


`

$3


``

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

$3

This project exists thanks to all the people who contribute. [Contribute].


$3

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