VueTippy - V6
For Tippy.js v4 use v4 branchVue.js 3 wrapper for Tippy.js
Documentation
For full v6 documentation, visit https://vue-tippy.netlify.app/.
Installation
npm install vue-tippy@v6
//or
yarn add vue-tippy@v6Configuration (optional)
import { createApp } from 'vue'
import VueTippy from 'vue-tippy'
// or
import { plugin as VueTippy } from 'vue-tippy'
const app = createApp({})
app.use(
VueTippy,
// optional
{
directive: 'tippy', // => v-tippy
component: 'tippy', // => <tippy/>
}
)
app.mount('#app')Usage
Vue Directive
<template>
<button v-tippy="{ content: 'Hi!' }">Tippy!</button>
<button v-tippy="'Hello!'">Tippy!</button>
</template>
<!--
The below is optional in case you
installed the plugin globally
-->
<script>
import { directive } from 'vue-tippy'
export default {
directives: {
tippy: directive,
},
}
</script>Vue Component
<template>
<tippy content="Hi!">
<button>Tippy!</button>
</tippy>
</template>
<!--
The below is optional in case you
installed the plugin globally
-->
<script>
import { Tippy } from 'vue-tippy'
export default {
components: [Tippy],
}
</script>Using composition api
import { defineComponent, ref, h } from 'vue'
import { useTippy } from 'vue-tippy'
export default defineComponent({
setup() {
const button = ref()
useTippy(button, {
content: 'Hi!',
})
return () => h('button', { ref: button }, 'Tippy!')
},
})