Create Easy tooltips with Vue 2.x


See how to create easy tooltips with Vue 2.x using the vue-tooltip. Based on tether-tooltip a Javascript and CSS library for creating styleable tooltips.


npm install --save v-tooltip



import Vue from 'vue'
import { VTooltip } from 'v-tooltip'

Vue.directive('my-tooltip', VTooltip)


<div id="app">
    <img src="./assets/logo.png">
    <button v-my-tooltip.bottom-center="'You have ' + count + ' notifications!'">
        <h2>v-tooltip example</h2>

As count you can set your own attributes. The directive v-my-tooltip is the one we set in main.js, and bottom-center is the possition which the message is going to appear.

To achieve the above result along with the template setup apply style


.tooltip {
  display: none;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
  padding: 4px;
  z-index: 10000;

.tooltip .tooltip-content {
  background: black;
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;

.tooltip.tooltip-open-transitionend {
  display: block;

.tooltip.tooltip-after-open {
  opacity: 1;

See the available positions in the tether-tooltip documentation.

Compatible with Vue 2.0+

Check out the Demo and the GitHub page, by Akryum.