Vue.js Component For Tippy.js Tooltip Library

A Vue.js 3/2 wrapper for the popular Tippy.js library, which is a lightweight, pure JavaScript tooltip library.

How to use it:

1. Install and import the vue-tippy.

import { createApp } from 'vue'
import VueTippy from 'vue-tippy'
// or
import { plugin as VueTippy } from 'vue-tippy'
import 'tippy.js/dist/tippy.css' // optional for styling

const app = createApp({})
app.use(
  VueTippy,
  // optional
  {
    directive: 'tippy', // => v-tippy
    component: 'tippy', // => <tippy/>
    componentSingleton: 'tippy-singleton', // => <tippy-singleton/>
  }
)
app.mount('#app')

2. Attach a tooltip to an element.

<!--  As A Directive -->
<template>
  <button v-tippy="{ content: 'Hi!' }">Tippy!</button>
</template>
<script>
  import { directive } from 'vue-tippy'
  export default {
    directives: {
      tippy: directive,
    },
  }
</script>

<!-- As A Component -->
<template>
  <tippy content="Hi!">
    <button>Tippy!</button>
  </tippy>
  <tippy>
    <button>Tippy!</button>
    <template #content>
      Hi!
    </template>
  </tippy>
</template>
<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!')
  },
})

3. All default props.

a11y: true,
allowHTML: true,
animateFill: true,
arrow: false,
flip: true,
flipOnUpdate: false,
followCursor: false,
hideOnClick: true,
ignoreAttributes: false,
inertia: false,
interactive: false,
lazy: true,
multiple: false,
showOnInit: false,
sticky: false,
touch: true,
touchHold: false,
// shift-away, shift-toward, scale, perspective
animation: 'shift-away',
appendTo: () => document.body,
aria: 'describedby',
arrowType: 'sharp',
boundary: 'scrollParent',
content: '',
delay: 0,
distance: 10,
duration: [325, 275],
flipBehavior: 'flip',
interactiveBorder: 2,
interactiveDebounce: 0,
maxWidth: 350,
offset: 0,
onHidden() {},
onHide() {},
onMount() {},
onShow() {},
onShown() {},
placement: 'top',
popperOptions: {},
role: 'tooltip',
size: 'regular',
target: '',
// light, light-border, material, translucent
theme: 'dark',
trigger: 'mouseenter focus',
updateDuration: 0,
wait: null,
zIndex: 9999,

Preview:

Changelog:

05/20/2023

• v6.2.0: Update & bugfix

Download Details:

Author: KABBOUCHI

Live Demo: https://kabbouchi.github.io/vue-tippy/

Download Link: https://github.com/KABBOUCHI/vue-tippy/archive/master.zip

Official Website: https://github.com/KABBOUCHI/vue-tippy

Install & Download:

# Vue 2
$ npm i vue-tippy

# Vue 3
$ npm i [email protected]