vue-js-popover

Vue.js 2+ popover component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-js-popover
467631.2.13 years ago6 years agoMinified + gzip package size for vue-js-popover in KB

Readme

npm version

Vue.js popover


Live demo here
Install:
npm install vue-js-popover --save

Import:
import Vue from 'vue'
import Popover from 'vue-js-popover'

Vue.use(Popover)

Use:
<button v-popover:foo>Toggle popover</button>

<popover name="foo">
  Hello
</popover>

Or:
<button v-popover="{ name: 'foo' }">Toggle popover</button>

Tooltip

Plugin contains a simple wrapper for Tooltip. To use it you will have to:
Set tooltip flag in your main.js:
import VPopover from 'vue-js-popover'
Vue.use(VPopover, { tooltip: true })

Include tooltip component anywhere in the application:
<tooltip />

Assign message to any element:
<button v-popover:tooltip="'This is a string value'">My butt0n</button>

Props

| Name | Type | Required | Description | | ---------- | ---------------------- | -------- | ------------------------------------------------------ | | name | String | + | ... | | width | Number | - | ... | | transition | String | - | ... | | pointer | Boolean | - | If set - will show a tiny tip | | event | "click" \| "hover" | - | Type of event that will trigger showing of the popover | | delay | Number | - | Delay in milliseconds |

Positioning

You can use .left, .right, .top, .bottom modifiers to set the position of the popover.
Example:
<button v-popover:info.right>Edit (show popover right)</button>

<button v-popover.left="{ name: 'info' }">Edit</button>

Styling

Popover components have data-popover="name" argument that allows to apply styles to it.
Example:
<popover name="foo" :pointer="false">Bar</popover>

[data-popover='foo'] {
  background: #444;
  color: #f9f9f9;

  font-size: 12px;
  line-height: 1.5;
  margin: 5px;
}