VueJS Directive + Component for tippy.js (v5)

Notice: This is a pre-release. Currently the component wraps everything in <div> because it doesn't make sense in my opinion to use <span> or styling the <div> to be inline/inline-block. There are clases added for you to handle the styling/formatting.

Todo:

• [ ] figure out a better way to avoid wrapping everything
• [ ] write tests
• [ ] efficient code
• [ ] tippy.js singleton?

Quick Setup

CDN

<!-- I have no idea if this works, tell me if it doesn't -->
<script src="https://unpkg.com/[email protected]/dist/vuejs-tippy.min.js"></script>

Package Manager

Client side JS should be a dev dependency for those who build their app's assets

# npm
npm i --save-dev vuejs-tippy

# yarn
yarn add --dev vuejs-tippy

import Vue from 'vue'
import VueJSTippy from 'vuejs-tippy'

Vue.use(VueJSTippy, options); // component is also loaded here

Usage

Default Options

• tippy.js props combined with the following:

| key | desc | type | defaut | | --- | ---- | ------- | ---- | | directive | controls v-<directive> and component: <directive> | String | tippy | | ignoreAttributes | disables data-tippy-* for performance | Boolean | true |

Lifecycle Hooks

• Both the directive and component support tippy.js's hooks. Simply put @<hook> on the element/component for example:

<button v-tippy @onShown="onShownMethod"></button>

<tippy @onShown="onShownMethod"></tippy>

v-tippy Directive

• allows using title, but is static
• v-tippy and :content are checked on updates
• utilizes vuejs directive modifiers

Static Tooltip

• content, title as attributes

<button v-tippy <content|title>="I'm a tooltip!">Hover over me!</button>

Dynamic Tooltip

• Set tooltip content via directive argument:v-tippy="variable" or as :content prop

<button v-tippy :content="timer">Hover over me!</button>

<!-- or -->

<button v-tippy="timer">Hover over me!</button>

Directive Modifiers

• append to v-tippy directive e.g. v-tippy.modifier, applies only to tippy.js boolean props

<button v-tippy.interactive content="sets tippy.js option {interactive: true}">
    Hover over me!
</button>

<tippy> Vue Component

• only :content and :options
• :enabled & :visible boolean props for tippy's .enable() / .disable() and .show() / .hide() functions respectively
• can set options quickly via html attributes
  • ex: <tippy animate-fill="true" content="bg fill tooltip"><button>Hover over me!</button></tippy>

<tippy :content="timer">
    <button>Hover for a reactive tooltip</button>
</tippy>

<tippy :options="{content: timer, theme: 'light'}">
    <button>Props to for quick customization</button>
</tippy>

<!-- external tippy with trigger named -->

<tippy for="target">
    I'm a tooltip!
</tippy>

<button name="target">Hover over me!</button>

<!-- tippy content as reactive component -->

<tippy>
    <template slot="content">
        <custom-component :prop="timer"></custom-component>
    </template>

    <button>Reactive component tooltip</button>
</tippy>

<!-- external tippy for multiple elements, uses cloneNode(true), unsure of reactivity support -->

<tippy for=".btnToolTip">
    <p>single tooltip for multiple elements of the same class</p>
</tippy>

<div>
    <button class="btnToolTip" v-for="i in 5">
        Button #{{ i }}
    </button>
</div>

Credits

• atomiks for creating tippy.js
• KABBOUCHI for creating vue-tippy which gave me a better understanding of Vue plugins