Vue.js popover component


The Vue.js 2.0+ popover plugin, a tooltip for displaying messages to the users when they are clicking on certain elements.

To see it in action, check the live demo page.



To use it in your Vue projects just run the following command to install it

yarn add vue-js-popover

Use import to make it available to your vue files

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


Then you can use a button to toggle the popover and use the same name tag to define the content that should be displayed, like so:

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

<popover name="foo" :width="120">
    <a href="#">Well, hello there!</a>


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

That's it! If you would like to take a look at the source code, check the project's repository.