vue-js-popover
v1.2.1
Published
Vue.js 2+ popover component
Downloads
13,224
Maintainers
Readme
Vue.js popover
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;
}