wip

playground/App.vue

@@ -12,10 +12,41 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, h, computed, reactive } from 'vue'
+import {
+  defineComponent,
+  ref,
+  h,
+  computed,
+  reactive,
+  onMounted,
+  onUnmounted,
+  watch,
+} from 'vue'
 import { useTippy } from '../src'
 import Counter from './Counter.vue'
 
+function useMousePosition() {
+  const x = ref(0)
+  const y = ref(0)
+
+  function handler(e: MouseEvent) {
+    x.value = e.clientX
+    y.value = e.clientY
+  }
+
+  onMounted(() => {
+    window.addEventListener('mousemove', handler, false)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('mousemove', handler, false)
+  })
+
+  return {
+    x,
+    y,
+  }
+}
 export default defineComponent({
   setup() {
     const counter = ref<number>(0)
@@ -78,6 +109,29 @@ export default defineComponent({
     const button6Inc = () => {
       options.content = String(parseInt(options.content) + 1)
     }
+
+    const { x, y } = useMousePosition()
+
+    const { tippy } = useTippy(() => document.body, {
+      content: computed(() => `(${x.value},${y.value})`),
+      showOnCreate: true,
+      trigger: 'manual',
+      // sticky: true, // slow?
+      hideOnClick: false,
+      getReferenceClientRect: function () {
+        return {
+          width: 0,
+          height: 0,
+          top: y.value,
+          right: x.value,
+          bottom: y.value,
+          left: x.value,
+        }
+      },
+    })
+
+    watch([x, y], () => tippy.value?.popperInstance?.update())
+
     return {
       button,
       button2,

src/components/Tippy.ts

@@ -37,8 +37,6 @@ Object.keys(tippy.defaultProps).forEach((prop: string) => {
     props[prop] = {
       type: Boolean,
       default: function () {
-        console.log(tippy.defaultProps[prop as keyof DefaultProps])
-
         return tippy.defaultProps[prop as keyof DefaultProps] as Boolean
       },
     }
@@ -51,8 +49,6 @@ Object.keys(tippy.defaultProps).forEach((prop: string) => {
   }
 })
 
-console.log(props)
-
 export default defineComponent({
   props,
   setup(props) {

src/composables/useTippy.ts

@@ -15,7 +15,7 @@ import {
 import { TippyOptions, TippyContent } from '../types'
 
 export function useTippy(
-  el: Element | Ref<Element> | Ref<Element | undefined>,
+  el: Element | (() => Element) | Ref<Element> | Ref<Element | undefined>,
   opts: TippyOptions = {}
 ) {
   const instance = ref<Instance>()
@@ -72,11 +72,19 @@ export function useTippy(
     instance.value.setProps(getProps(opts))
   }
 
+  const refreshContent = () => {
+    if (!instance.value || !opts.content) return
+
+    instance.value.setContent(getContent(opts.content))
+  }
+
   onMounted(() => {
     if (!el) return
 
     let target = isRef(el) ? el.value : el
 
+    if (typeof target === 'function') target = target()
+
     target && (instance.value = tippy(target, getProps(opts)))
   })
 
@@ -87,20 +95,15 @@ export function useTippy(
     container = null
   })
 
-  let watchSource: any = null
-
   if (isRef(opts) || isReactive(opts)) {
-    watchSource = opts
+    watch(opts, refresh, { immediate: false })
   } else if (isRef(opts.content)) {
-    watchSource = opts.content
-  }
-
-  if (watchSource) {
-    watch(watchSource, refresh, { immediate: false })
+    watch(opts.content, refreshContent, { immediate: false })
   }
 
   return {
     tippy: instance,
     refresh,
+    refreshContent,
   }
 }