Package Exports

vuejs-tippy

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuejs-tippy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VueJS Plugin + Component for tippy.js

npm bundle size

Notice: 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

Quick Setup

CDN

<!-- I have no idea if this works, tell me if it doesn't -->
<script src="https://unpkg.com/vuejs-tippy@0.0.2/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);

Usage

Lifecycle Hooks

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

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

`v-tippy` directive method

<!--v-tippy directive method-->

<button v-tippy content="I'm a tooltip!">Hover over me!</button>
<button v-tippy title="I'm a tooltip!">Hover over me!</button>
<button v-tippy data-tooltip="I'm a tooltip!">Hover over me!</button>
<button v-tippy="timer">Hover over me!</button>
<button v-tippy.interactive="{interactive: true}">Hover over me!</button>

`<tippy>` Vue Component method(s)

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

<!-- OR  -->

<tippy :options="{content: timer, theme: 'light'}">
    <button>Props to pass making it easy to use</button>
</tippy>

<!-- OR  -->

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

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

<!-- OR -->

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

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

<!-- OR -->

<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>

vuejs-tippy