Installation

Using Webpack, Rollup, etc...

1. using npm or yarn

install the script like so:
npm install vue-directive-tooltip --save or yarn add vue-directive-tooltip

2. use the script with Vue
// in your js file import Vue from 'vue'; import Tooltip from 'vue-directive-tooltip'; import 'vue-directive-tooltip/css/index.css'; Vue.use(Tooltip);
3. do not forget the css if you do not want to use the above import!

You can either get the raw css clicking here

or import the css from node_modules (in case of webpack, the ~ represents the node_modules folder):
@import "~vue-directive-tooltip/css/index.css";

or the scss directly:
@import "~vue-directive-tooltip/src/css/index.scss";

Using script tag

When using ES5, don't forget to copy the css.
raw css: download

<link rel="stylesheet" href="https://unpkg.com/vue-directive-tooltip@latest/css/index.min.css"> <script src="https://unpkg.com/vue@latest/dist/vue.js"></script> <script src="https://unpkg.com/vue-directive-tooltip@latest/dist/vueDirectiveTooltip.min.js"></script> <script>Vue.use(vueDirectiveTooltip);</script>

Change global default values

Default values

{ delay: 200, placement: 'auto', class: '', // ex: 'tooltip-custom tooltip-other-custom' triggers: ['hover', 'focus'], offset: 5 }

If you have a need to change certain default value(s) for all tooltips:

Vue.use(vueDirectiveTooltip, { delay: 500, placement: 'right', class: 'tooltip-red', triggers: ['hover'], offset: 0 });

Usage

Basic

Example: Tooltip

<span v-tooltip="'basic one'">Tooltip</span>

Please be careful of the single quotes inside the double quote.

Using an options object

Example: Tooltip

<span v-tooltip="{ content: 'options object' }">Tooltip</span>

Referencing an HTML element

Example: the target is an html element

this content is in an HTML tag
<span v-tooltip="{ html: 'tooltipContent' }">the target is an html element</span> <div id="tooltipContent"> <p>this content is in an <strong>HTML</strong> tag</p> </div>

Positioning

5 different positions are available: auto (default) | bottom | top | left | right

Default positioning: auto tooltip

<span v-tooltip="'auto positionning'">Tooltip</span>

Bottom positioning: bottom tooltip

<span v-tooltip.bottom="'bottom'">bottom tooltip</span>

Top positioning: top tooltip

<span v-tooltip.top="'top'">top tooltip</span>

Left positioning: left tooltip

<span v-tooltip.left="'left'">left tooltip</span>

Right positioning: right tooltip

<span v-tooltip.right="'right'">right tooltip</span>

Positioning - Variants

All above positions have 2 extra variants that you can use: start | end

Bottom Start positioning: tooltip

<span v-tooltip.bottom.start="'bottom.start'">"bottom start" tooltip</span>

Bottom End positioning: tooltip

<span v-tooltip.bottom.end="'bottom.end'">"bottom end" tooltip</span>

Delay

default: { delay: 200 }

Example: Delayed Tooltip

<span v-tooltip="{content:'delayed by 1 second', delay: 1000}">Delayed Tooltip</span>

Offset

default: { offset: 5 }

Example: Offset Tooltip

<span v-tooltip="{content:'offset by 30px', offset: 30}">Offset Tooltip</span>

Events / Triggers

There are several options to trigger the display of the tooltip:
you can use a combination of these keywords: click | hover | focus

single event: click trigger

<span v-tooltip.click="'Show on: click'">click trigger</span>

or even a combination: hover.focus triggers together

<span v-tooltip.hover.focus="'Show on: hover.focus'">hover.focus triggers together</span>

By the default, the click trigger will close when clicking anywhere on the page.
In case you want the tooltip to close when clicking again on the same element, there is an extra option. click event: click + manual trigger

<span v-tooltip.click.manual="'click + manual trigger'">click + manual trigger</span>

Programmatic

If you do not want to use triggers and manage the tooltip visibility through Vue, you can!
For that, you need to use the modifier .notrigger + the options object attribute visible
<a v-tooltip.notrigger="{ content: '...', visible: visibility }"

change the visibility with the button below

<template> <div> <a v-tooltip.notrigger="{ content: 'change the visibility', visible: visibility }">change the visibility with the button below</a><br> <button @click="visibility = !visibility"> <span v-if="visibility">hide tooltip</span> <span v-else>show tooltip</span> </button> </div> </template> <script> export default { data() { return { visibility: false }; } }; </script>

Custom css / class

Let's personalize a bit this tooltip!
Wants some red? Here is how you do it.

Example: tooltip appearance

Full example on codepen: https://codepen.io/hekigan/pen/oebpPm

1. add somewhere in your css file the classes that you want to use.
Let's say... .tooltip-custom

We have to account for the arrow color also depending on the tooltip's position.

.vue-tooltip.tooltip-custom { background-color: red; } .vue-tooltip.tooltip-custom .tooltip-arrow { border-color: red; }

2. in your directive options object, specify your css class name(s)

<span v-tooltip="{ content: 'custom class', class: 'tooltip-custom tooltip-other-custom' }">custom tooltip</span>

Special modifiers

Due to a feature/bug in mobile iOS/safari combo, users will have to tap twice to obtain a proper click/tap.

Example: iOS double tap killer

It's not a bug per say but a feature according to Safari's devs. This is a famous problem and I did a lot of digging to see what was involved.

It is annoying to go around but at the same time I do understand the reason behind the implementation. First tap is for the hover event (either JS or CSS -this is important-), the second confirms that you want to click and not just hover.

In the situation in which you just have a normal tooltip (let's say for a pagination), you want to just display the tooltip on the first tap and then click it on the second one. That's all well, but this tooltip lib can also be used to display interactive html content (like a menu). And in this case, it means trouble because you don't want to tap twice to activate a link.

For this specific reason and because I don't want to have a breaking change, I think that the most elegant solution is to add a .ios modifier (like .prevent for example). What it will do is, on mobile safari on iOS, remove the hover event and substitute the click event for it. On other platform, it will retain the usual behaviour without any need for you to get involved. I did test a first implementation and it fixed the issue for me.

<span v-tooltip.ios="'tooltip on iOS'">iOS double tap killer</span>