VueTippy
Directive wrapper for Tippy.js
For tippyJS v4 use next branch
Documentation
For full documentation, visit https://kabbouchi.github.io/vue-tippy/.
Installation
npm install --save vue-tippy # or yarn add vue-tippyUsage
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/
