renatodeleao / vue-tippy

VueJS Tooltip powered by Tippy.js

VueTippy

Directive wrapper for Tippy.js

For tippyJS v1 use v1 branch

Documentation

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

Installation

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

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueTippy from 'vue-tippy'

Vue.use(VueTippy)
// or
Vue.use(VueTippy,{
    flipDuration: 0,
    popperOptions: {
        modifiers: {
            preventOverflow: {
                enabled: false
            }
        }
    }
})

Browser

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

Basic

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

Bind title

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

Bind settings

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

HTML Template 1 (without reactivity)

<button data-tippy-html="#contentpopup1" data-tippy-interactive="true" v-tippy> My Button! </button>

<div id="contentpopup1" style="display: none" v-tippy-html>
    <div>
        <h3> Header</h3>
        <p style="color: black"> {{ message }} - data binding </p>
    </div>
</div>

HTML Template 2 (with reactivity)

<button v-tippy="{ html : '#contentpopup2'  , interactive : true , reactive : true }"> My Button! </button>

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

Vue component

<button  v-tippy="{ html : '#comppopup'  , interactive : true, reactive : true }"> My Button! </button>

<vue-component-test id="comppopup"></vue-component-test>

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

License

MIT