v-tooltip

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, use the v-tooltip directive:

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

Of course, you can use a reactive property:

<button v-tooltip="tooltipContent">

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.

Object notation

You can use an object instead of a simple string:

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

Dynamic CSS classes

You can set the tooltip css classes dynamically with the object notation:

<button v-tooltip="{ content: 'You have ' + count + ' new messages.', classes: ['a', 'b'] }">

This will replace the default CSS classe with 'a b' on the tooltip element.

You can also use the standard class notation:

<button v-tooltip="{ content: 'You have ' + count + ' new messages.', classes: 'a b' }">

Or a reactive property:

<button v-tooltip="{ content: 'You have ' + count + ' new messages.', classes: tooltipClasses }">

Global options

The default global options are:

{
  // Applied to the tooltip element
  // (replaced by the `classes` option of the object notation)
  defaultClass: 'vue-tooltip-theme',

  // Any valid tether option.
  tetherOptions: {
    constraints: [
      {
        to: 'window',
        attachment: 'together',
        pin: true,
      },
    ],
  },
}

You can change the options during install with the arguments:

Vue.use(VTooltip, options)

Or directly on the directive definition:

VTooltip.options.defaultClass = 'my-tooltip'

See the tether documentation for more info on tetherOptions.

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)