add useTippyComponent

playground/main.ts

@@ -8,6 +8,7 @@ import App from './App.vue'
 import PageIndex from './pages/Index.vue'
 import PageNestedComponents from './pages/NestedComponents.vue'
 import PageSingletonComponents from './pages/SingletonComponents.vue'
+import Testing from './pages/Testing.vue'
 import Counter from './components/Counter.vue'
 import UiIcon from "./components/Icon.vue";
 
@@ -17,6 +18,7 @@ const router = createRouter({
     { path: '/', component: PageIndex },
     { path: '/nested-components', component: PageNestedComponents },
     { path: '/singleton-components', component: PageSingletonComponents },
+    { path: '/testing', component: Testing },
   ]
 })
 

playground/pages/Testing.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+
+    <input
+      type="text"
+      v-model="content"
+    >
+
+    <TippyComponent>
+      Hi
+    </TippyComponent>
+
+    <TippyComponentTwo />
+    <br>
+    <br>
+    <br>
+
+    <button @click="show">Show</button>
+  </div>
+</template>
+
+<script>
+import { h, ref } from "vue";
+import { useTippyComponent } from './../../src/composables/useTippyComponent';
+import ButtonVue from '../components/Button.vue';
+export default {
+  name: "App",
+  setup() {
+    const content = ref('Hello!')
+    const { TippyComponent, instance } = useTippyComponent({
+      content
+    })
+
+    const show = () => {
+      instance.value.show()
+    }
+
+    const { TippyComponent: TippyComponentTwo } = useTippyComponent(
+      {
+        content : h(ButtonVue, { style : { background : 'red'} }, 'test')
+      },
+      () => h('button', { style : { background : 'red'} }, 'test')
+    )
+
+    return {
+      content,
+      TippyComponent,
+      TippyComponentTwo,
+      show
+    }
+  }
+};
+</script>

src/composables/index.ts

@@ -1,2 +1,3 @@
 export { useTippy } from './useTippy'
+export { useTippyComponent } from './useTippyComponent'
 export { useSingleton } from './useSingleton'

src/composables/useTippyComponent.ts

@@ -0,0 +1,25 @@
+import { h, ref } from 'vue'
+import { TippyOptions } from '../types'
+import TippyComponent from './../components/Tippy'
+
+export function useTippyComponent(
+  opts: TippyOptions = {},
+  children?: any
+) {
+  const instance = ref()
+
+  return {
+    instance,
+    TippyComponent: h(
+      TippyComponent,
+      {
+        ...opts,
+        onVnodeMounted: vnode => {
+          //@ts-ignore
+          instance.value = vnode.component.ctx
+        },
+      },
+      children
+    ),
+  }
+}

src/index.ts

@@ -12,6 +12,7 @@ import directive from './directive'
 import plugin from './plugin'
 
 import { useTippy } from './composables/useTippy'
+import { useTippyComponent } from './composables/useTippyComponent'
 import { useSingleton } from './composables/useSingleton'
 
 const setDefaultProps = tippy.setDefaultProps
@@ -23,6 +24,7 @@ setDefaultProps({
 
 export {
   useTippy,
+  useTippyComponent,
   roundArrow,
   tippy,
   useSingleton,