Vue.js Tooltip powered by Tippy.js


vue-tippy is a Vue.js wrapper for the Tippy.js library, which allows you to use the tooltips as a Vue component and as a directive.

Live demo

Take a look at the example below.


To start working with vue-tippy use the following command to install it.

npm install vue-tippy --save


yarn add vue-tippy

of load it via CDN

<script src=""></script>

If used as a global component

var vueTippy = require('vue-tippy')

Using the v-tippy directive in multiple elements , when a title attribute is present:

<!-- Bind title -->
<button :title="dynamicTitle" v-tippy> My Button! </button>
        title="A List!" 
        v-tippy="{ position : 'top',  arrow: true, size: 'small' }">
            HEY A LIST
title="Hello there!" 
v-tippy="{ position : 'right',  arrow: false, animation: 'scale', duration: 2000, size: 'big' }"
title="Great day!" 
v-tippy="{ position : 'left',  arrow: false, theme: 'light'}">
v-tippy="{ position : 'bottom',  arrow: true, animation: 'perspective', size: 'big'}"> 

As a Vue component:

<button  v-tippy="{ html : '#comppopup' }"> My Button! </button>
<vue-component-test id="comppopup"></vue-component-test>

You can use options in the confing object, available at the Tippy.js docs. There is also the option for HTML Templates (with or without reactivity).

If you are interested for more or you have any bugs and suggestions, click here. That's it!