Skip to content
🍡 Vue.js 2 library for dropdowns / popovers / tooltips
Branch: master
Clone or download
Latest commit f352b2f Jan 4, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Merge branch 'feature/update-dependencies' Jan 3, 2019
dist Update dependencies Jan 3, 2019
src Cleanup Jan 4, 2019
.babelrc Update dependencies and migrate config Dec 18, 2018
.gitignore Cleanup Jan 4, 2019
.npmignore Initial commit. Version 1.0.0 Jun 12, 2017
LICENSE Initial commit. Version 1.0.0 Jun 12, 2017 Update Nov 19, 2017
package.json 1.1.8 Jan 4, 2019
webpack.config.js Update dependencies Jan 3, 2019

npm version

Vue.js popover

Live demo here


npm install vue-js-popover --save


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



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

<popover name="foo">
  Hello 🎉


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


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:


Assign message to any element:

<button v-popover:tooltip="'This is a string value'">My butt0n</button>

Tooltip component is simple af - 33 lines of code (mostly declarations). It demonstrates how easily you can create new things using the provided tool.


props: {
  /* Tooltip name.                           */
  name:    { type: String,  required: true   },
  width:   { type: Number,  default: 180     },
  /* If set - will show a tiny tip.          */
  pointer: { type: Boolean, default: true    },
  /* Name of the event which triggeres 
     showing/hiding of the popover.
     Possible values are: 'click', 'hover'.  */  
  event:   { type: String,  default: 'click' }


You can use .left, .right, .top, .bottom modifiers to set the position of the popover.


<button v-popover:info.right>Edit (show popover right)</button> 

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


Popover components have data-popover="name" argument that allows to apply styles to it.


<popover name="foo" :pointer="false">Bar</popover>
div[data-popover="foo"] {
  background: #444;
  color: #f9f9f9;

  font-size: 12px;
  line-height: 1.5;
  margin: 5px;
You can’t perform that action at this time.