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>