vue-tippy/docs/content/en/flavor/composition-api.md

title, description, position, category

title	description	position	category
Composition API		13	Flavor

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'
import Counter from '@components/Counter.vue'

const singletons = ref([])

useSingleton(singletons, {
  placement: 'top',
  moveTransition: 'transform 0.2s ease-out',
})
</script>