Installation

Using Webpack, Rollup, etc...

Vue.use() is called from the script, so you don't need to care about it.

Using script tag

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

Usage

Basic

Example: Tooltip

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

Using an options object

Example: Tooltip

Referencing and HTML element

Example: the target is an html element

this content is in an HTML tag

Positioning

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

Default positioning: bottom tooltip

Top positioning: top tooltip

Left positioning: left tooltip

Right positioning: right tooltip

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

or even a combination: hover.focus triggers together

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

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

Custom css / class

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

Example: tooltip appearance

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.

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