--- layout: default ---

Installation

Using Webpack, Rollup, etc...

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

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc install-webpack.js %}

Using script tag

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

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc install-script.html %}

Usage

Basic

Example: Tooltip

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc basic.vue %}

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

Using an options object

Example: Tooltip

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc basic-options.vue %}

Referencing and HTML element

Example: the target is an html element

this content is in an HTML tag
{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc basic-options-html.vue %}

Positioning

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

Default positioning: bottom tooltip

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc positioning-default.vue %}

Top positioning: top tooltip

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc positioning-top.vue %}

Left positioning: left tooltip

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc positioning-left.vue %}

Right positioning: right tooltip

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc positioning-right.vue %}

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

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc triggers-click.vue %}

or even a combination: hover.focus triggers together

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc triggers-combination.vue %}

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

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc triggers-click-manual.vue %}

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

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc programmatic.vue %}

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.

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc custom-css.css %}

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

{% gist hekigan/a614757bc63f85fd0401c95e16cf96cc custom-css.vue %}