Create Easy tooltips with Vue 2.x

vue-tooltip

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.

Install

npm install --save v-tooltip

Usage

main.js

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

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

App.vue

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

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

CSS

.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.