/vue-tooltip

Easy tooltips with Vue 2.x

Primary LanguageCSS

v-tooltip

npm npm vue2

Easy tooltips with tether-tooltip

Demo

JSFiddle

Installation

Npm

npm install --save v-tooltip

Install the plugin into Vue:

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

Vue.use(VTooltip)

Or use the directive directly:

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

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

Browser

Include Tether, Drop, Tooltip and v-tooltip in the page.

Install the plugin into Vue:

Vue.use(VTooltip)

Or use the directive directly:

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

Usage

In the template:

<button v-tooltip="'You have ' + count + ' new messages.'">

You can specify the tooltip position as a modifier:

<button v-tooltip.bottom-left="'You have ' + count + ' new messages.'">

See the available positions in the tether-tooltip documentation.

Example Style

Sass / Less

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

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

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

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

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;
}

LICENCE ISC - Created by Guillaume CHAU (@Akryum)