wip

playground/App.vue

@@ -9,10 +9,12 @@
     <button ref="button3">My Button 3</button>
     <button ref="button4">My Button 4</button>
     <button ref="button5">My Button 5</button>
+    <button ref="button6">My Button 6</button>
+    <button @click="button6Inc">My Button 6 - Inc & Refresh</button>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, h, computed } from 'vue'
+import { defineComponent, ref, h, computed, reactive } from 'vue'
 import { useTippy } from '../src'
 import Counter from './Counter.vue'
 
@@ -27,6 +29,7 @@ export default defineComponent({
     const button3 = ref<HTMLButtonElement>()
     const button4 = ref<HTMLButtonElement>()
     const button5 = ref<HTMLButtonElement>()
+    const button6 = ref<HTMLButtonElement>()
 
     useTippy(button, {
       content: 'Test',
@@ -38,6 +41,7 @@ export default defineComponent({
     useTippy(button2, {
       content: h('h1', 'hi ' + counter.value),
     })
+
     useTippy(button3, {
       content: computed(() =>
         h(
@@ -66,12 +70,23 @@ export default defineComponent({
       showOnCreate: true,
     })
 
+    const options = reactive({
+      content: '1',
+    })
+
+    useTippy(button6, options)
+
+    const button6Inc = () => {
+      options.content = 'a'
+    }
     return {
       button,
       button2,
       button3,
       button4,
       button5,
+      button6,
+      button6Inc,
     }
   },
 })

src/composables/useTippy.ts

@@ -1,6 +1,16 @@
 import tippy, { Instance, Props, Content } from 'tippy.js'
-import { ref, onMounted, Ref, isRef, isVNode, render, watch } from 'vue'
-import { TippyOptions } from '../types'
+import {
+  ref,
+  onMounted,
+  Ref,
+  isRef,
+  isReactive,
+  isVNode,
+  render,
+  watch,
+  VNode,
+} from 'vue'
+import { TippyOptions, TippyContent } from '../types'
 
 export function useTippy(
   el: Element | Ref<Element> | Ref<Element | undefined>,
@@ -16,42 +26,62 @@ export function useTippy(
     return container
   }
 
+  const getContent = (content: TippyContent): Content => {
+    let newContent: Content
+
+    let unwrappedContent: Content | VNode = isRef(content)
+      ? content.value
+      : content
+
+    if (isVNode(unwrappedContent)) {
+      render(unwrappedContent, getContainer())
+
+      newContent = () => getContainer()
+    } else {
+      newContent = unwrappedContent
+    }
+
+    return newContent
+  }
+  const getProps = (opts: TippyOptions): Partial<Props> => {
+    let options: any = {}
+
+    if (isRef(opts)) {
+      options = opts.value
+    } else if (isReactive(opts)) {
+      options = { ...opts }
+    } else {
+      options = { ...opts }
+    }
+
+    if (options.content) options.content = getContent(options.content)
+
+    return options as Props
+  }
+
   onMounted(() => {
     if (!el) return
 
     let target = isRef(el) ? el.value : el
-    let options = { ...opts }
 
-    if (isRef(options.content)) {
-      options.content = options.content.value
-    }
-
-    if (isVNode(options.content)) {
-      render(options.content, getContainer())
-
-      options.content = () => getContainer()
-    }
-    target && (instance.value = tippy(target, options as Props))
+    target && (instance.value = tippy(target, getProps(opts)))
   })
 
-  if (isRef(opts.content)) {
+  let watchSource: any = null
+
+  if (isRef(opts) || isReactive(opts)) {
+    watchSource = opts
+  } else if (isRef(opts.content)) {
+    watchSource = opts.content
+  }
+
+  if (watchSource) {
     watch(
-      opts.content,
+      watchSource,
       () => {
         if (!instance.value) return
 
-        let content = opts.content
-
-        if (isRef(opts.content)) {
-          content = opts.content.value
-        }
-
-        if (isVNode(content)) {
-          render(content, getContainer())
-
-          content = () => getContainer()
-        }
-        instance.value.setContent(content as Content)
+        instance.value.setProps(getProps(opts))
       },
       { immediate: false }
     )
@@ -59,5 +89,10 @@ export function useTippy(
 
   return {
     tippy: instance,
+    refresh: () => {
+      if (!instance.value) return
+
+      instance.value.setProps(getProps(opts))
+    },
   }
 }

src/types/index.ts

@@ -1,8 +1,10 @@
 import { Props, Content } from 'tippy.js'
 import { VNode, Ref } from 'vue'
 
+export declare type TippyContent = Content | VNode | Ref
+
 export declare type TippyOptions = Partial<
   Omit<Props, 'content'> & {
-    content: Content | VNode | Ref
+    content: TippyContent
   }
 >