wip

src/components/Tippy.ts

@@ -53,7 +53,8 @@ const TippyComponent = defineComponent({
   props,
   setup(props) {
     const elem = ref<Element>()
-    return { elem, ...useTippy(elem, props) }
+    const tippy = useTippy(elem, props)
+    return { elem, ...tippy }
   },
   render() {
     let slot = this.$slots.default ? this.$slots.default() : []

src/composables/useTippy.ts

@@ -24,7 +24,10 @@ tippy.setDefaultProps({
 
 export function useTippy(
   el: Element | (() => Element) | Ref<Element> | Ref<Element | undefined>,
-  opts: TippyOptions = {}
+  opts: TippyOptions = {},
+  settings: {
+    mount: boolean
+  } = { mount: true }
 ) {
   const instance = ref<Instance>()
 
@@ -86,38 +89,6 @@ export function useTippy(
     instance.value.setContent(getContent(opts.content))
   }
 
-  const init = () => {
-    if (!el) return
-
-    let target = isRef(el) ? el.value : el
-
-    if (typeof target === 'function') target = target()
-
-    target && (instance.value = tippy(target, getProps(opts)))
-  }
-
-  const vm = getCurrentInstance()
-
-  if (vm) {
-    if (vm.isMounted) {
-      init()
-    } else {
-      onMounted(init)
-    }
-
-    onUnmounted(() => {
-      destroy()
-    })
-  } else {
-    init()
-  }
-
-  if (isRef(opts) || isReactive(opts)) {
-    watch(opts, refresh, { immediate: false })
-  } else if (isRef(opts.content)) {
-    watch(opts.content, refreshContent, { immediate: false })
-  }
-
   const setContent = (value: TippyContent) => {
     instance.value?.setContent(getContent(value))
   }
@@ -128,17 +99,90 @@ export function useTippy(
 
   const destroy = () => {
     if (instance.value) {
+      try {
+        //@ts-ignore
+        // delete instance.value.reference.$tippy
+      } catch (error) {}
+
       instance.value.destroy()
+      instance.value = undefined
     }
     container = null
   }
 
-  return {
+  const show = () => {
+    instance.value?.show()
+  }
+
+  const hide = () => {
+    instance.value?.hide()
+  }
+
+  const disable = () => {
+    instance.value?.disable()
+  }
+
+  const enable = () => {
+    instance.value?.enable()
+  }
+
+  const unmount = () => {
+    instance.value?.unmount()
+  }
+
+  const mount = () => {
+    if (!el) return
+
+    let target = isRef(el) ? el.value : el
+
+    if (typeof target === 'function') target = target()
+
+    if (target) {
+      instance.value = tippy(target, getProps(opts))
+
+      //@ts-ignore
+      target.$tippy = response
+    }
+  }
+
+  const response = {
     tippy: instance,
     refresh,
     refreshContent,
     setContent,
     setProps,
     destroy,
+    hide,
+    show,
+    disable,
+    enable,
+    unmount,
+    mount,
   }
+
+  if (settings.mount) {
+    const vm = getCurrentInstance()
+
+    if (vm) {
+      if (vm.isMounted) {
+        mount()
+      } else {
+        onMounted(mount)
+      }
+
+      onUnmounted(() => {
+        destroy()
+      })
+    } else {
+      mount()
+    }
+  }
+
+  if (isRef(opts) || isReactive(opts)) {
+    watch(opts, refresh, { immediate: false })
+  } else if (isRef(opts.content)) {
+    watch(opts.content, refreshContent, { immediate: false })
+  }
+
+  return response
 }

src/directive/index.ts

@@ -44,7 +44,7 @@ const directive: Directive = {
       opts.content = el.getAttribute('content')
     }
 
-    el.$tippy = useTippy(el, opts)
+    useTippy(el, opts)
   },
   unmounted(el) {
     if (el.$tippy) {