vue-tippy

vue-tippy

Directive wrapper for Tippy.js

Install

CDN

unpkg.com
cdn.jsdelivr.net

Available through npm as vue-tippy.

var vueTippy = require('vue-tippy')
Vue.use(vueTippy)

Usage

Using the v-tippy directive

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="{ position : 'top',  arrow: true }"> My Button! </button>

HTML Template 1 (without reactivity)

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

<div id="contentpopup1" style="display: none">
        <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 }"> 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 }"> My Button! </button>

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

Bugs

• Constant updating HTML or VueComponent will cause small delay for tooltip to pickup the new content, if your tooltip depend on it, you can use this.$tippy.forceUpdateHtml() to update it instantly. fixed in v0.2.9

License

MIT