vue-tippy

VueTippy

Directive wrapper for Tippy.js

For tippyJS v1 use v1 branch

Documentation

For full v4 documentation, visit https://kabbouchi.github.io/vue-tippy/4.0/.

Installation

npm install --save vue-tippy@next
# or
yarn add vue-tippy@next

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueTippy, { VueComponent]} from 'vue-tippy'

Vue.use(VueTippy)
// or
Vue.use(VueTippy,{
    directive : 'tippy', // => v-tippy
    flipDuration: 0,
    popperOptions: {
        modifiers: {
            preventOverflow: {
                enabled: false
            }
        }
    }
})

Vue.component('tippy',VueComponent);

Browser

<!-- From CDN -->
<script src="https://unpkg.com/vue-tippy@next/dist/vue-tippy.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tippy@next/dist/vue-tippy.min.js"></script>

Basic

<button content="Hi!" v-tippy> My Button! </button>

Bind title

<button :content="dynamicTitle" v-tippy> My Button! </button>

Bind settings

<button content="Hello" v-tippy="{ placement : 'top',  arrow: true }"> My Button! </button>

Vue component

<tippy to="myTrigger" arrow>
    <div>
        <h3> Header</h3>
        <p style="color: black"> {{ message }} - data binding </p>
        <button @click="clicked">Click<button>
    </div>
</tippy>

<button name="myTrigger">Tippy Trigger<button>

<tippy arrow>
    <template v-slot:trigger>
        <button>Tippy Trigger<button>
    </template>

     <div>
        <h3> Header</h3>
        <p style="color: black"> {{ message }} - data binding </p>
        <button @click="clicked">Click<button>
    </div>
</tippy>

<tippy :content="`tooltip: ${message}`" arrow>
    <template v-slot:trigger>
        <button>Tippy Trigger<button>
    </template>
</tippy>

For more info on TippyJS view the documentation and demo here: https://atomiks.github.io/tippyjs/

License

MIT