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]