wip

playground/App.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tippy content="test">
-      Hi
-    </tippy>
+    <tippy content="test">Hi</tippy>
 
     <button ref="button">My Button</button>
     <button ref="button2">My Button 2</button>
@@ -63,9 +61,10 @@ export default defineComponent({
       interactive: true,
       showOnCreate: true,
     })
-
     useTippy(button5, {
-      content: h(Counter),
+      content: defineComponent(() => {
+        return () => h('p', 'Hellooooo')
+      }),
       interactive: true,
       showOnCreate: true,
     })

src/composables/useTippy.ts

@@ -9,6 +9,7 @@ import {
   render,
   watch,
   VNode,
+  h,
 } from 'vue'
 import { TippyOptions, TippyContent } from '../types'
 
@@ -29,13 +30,17 @@ export function useTippy(
   const getContent = (content: TippyContent): Content => {
     let newContent: Content
 
-    let unwrappedContent: Content | VNode = isRef(content)
+    let unwrappedContent: Content | VNode | { render: Function } = isRef(
+      content
+    )
       ? content.value
       : content
 
     if (isVNode(unwrappedContent)) {
       render(unwrappedContent, getContainer())
-
+      newContent = () => getContainer()
+    } else if (typeof unwrappedContent === 'object') {
+      render(h(unwrappedContent), getContainer())
       newContent = () => getContainer()
     } else {
       newContent = unwrappedContent

src/types/index.ts

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