Composition API
Work in progess
Low level, flexible composition, great for build tooltips with complex interactions.
Click here to see full documentation on props.
Basic Usage
<template>
<button ref="btn">Tippy!</button>
</template>
<script setup>
import { useTippy } from 'vue-tippy'
const btn = ref()
useTippy(btn, {
content: 'Hello!',
})
</script>
Advanced Usage
Example 1
<template>
<button ref="btn">Tippy!</button>
</template>
<script setup>
import { useTippy } from 'vue-tippy'
import Counter from '@components/Counter.vue'
const btn = ref()
const {
tippy,
refresh,
refreshContent,
setContent,
setProps,
destroy,
hide,
show,
disable,
enable,
unmount,
mount,
state,
} = useTippy(btn, {
content: Counter,
arrow: true,
})
</script>
Example 2
<template>
<button ref="btn">Tippy!</button>
</template>
<script setup>
import { useTippy } from 'vue-tippy'
import Counter from '@components/Counter.vue'
const btn = ref()
useTippy(btn, {
content: h(Counter, { initialCount: 42 }),
arrow: true,
})
</script>
Singleton
Example 1
<template>
<div>
<button :ref="v => singletons.push(v)" v-tippy="'Tooltip 1'">Button 1</button>
<button :ref="v => singletons.push(v)" v-tippy="'Tooltip 2'">Button 2</button>
</div>
</template>
<script setup>
import { useSingleton } from 'vue-tippy'
const singletons = ref([])
useSingleton(singletons, {
placement: 'top',
moveTransition: 'transform 0.2s ease-out',
})
</script>
Edit this page on GitHub
Updated at Mon, Dec 25, 2023