Merge pull request #325 from nknwns/add-vue-instance-element

feat: add support for vue components in useTippy

playground/pages/Index.vue

@@ -188,6 +188,13 @@
       </button>
     </div>
 
+    <div class="mt-6">
+      <span class="font-semibold mr-4">useTippy + vue component:</span>
+      <UiButton ref="vueComponentButton">
+        Vue component Button
+      </UiButton>
+    </div>
+
     <div class="mt-6">
       <span class="font-semibold mr-4"
         >Tippy component + change content and props realtime using component
@@ -300,6 +307,7 @@ import {
 } from 'vue'
 import { useSingleton, useTippy, TippyOptions, TippyComponent } from '../../src'
 import Counter from '../components/Counter.vue'
+import UiButton from '../components/Button.vue'
 
 function useMousePosition() {
   const x = ref(0)
@@ -324,6 +332,7 @@ function useMousePosition() {
   }
 }
 export default defineComponent({
+  components: { UiButton },
   setup() {
     const counter = ref<number>(0)
 
@@ -398,6 +407,12 @@ export default defineComponent({
       triggerTarget: button7,
     })
 
+    const vueComponentButton = ref()
+
+    useTippy(vueComponentButton, {
+      content: 'Test Vue component',
+    })
+
     const { x, y } = useMousePosition()
 
     const { tippy } = useTippy(() => document.body, {
@@ -478,6 +493,7 @@ export default defineComponent({
       button6Inc,
       button7,
       target7,
+      vueComponentButton,
       tippyComponent1,
       log: console.log,
     }

src/composables/useTippy.ts

@@ -232,7 +232,8 @@ export function useTippy(
     if (typeof target === 'function') target = target()
 
     if (target) {
-      instance.value = tippy(target, getProps(opts))
+      //@ts-ignore
+      instance.value = tippy(target?.$el ?? target, getProps(opts))
       //@ts-ignore
       target.$tippy = response
     }