diff --git a/playground/App.vue b/playground/App.vue
index 905d41c..8b6c56c 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -5,22 +5,73 @@
+
+
+
+
diff --git a/src/components/Tippy.ts b/src/components/Tippy.ts
index 5a4a1cc..1b7f8d2 100644
--- a/src/components/Tippy.ts
+++ b/src/components/Tippy.ts
@@ -4,7 +4,7 @@ import { useTippy } from '../composables'
export default defineComponent({
props: {
- content: Object as PropType,
+ content: {} as PropType,
},
setup(props) {
const elem = ref()
diff --git a/src/composables/useTippy.ts b/src/composables/useTippy.ts
index 206d621..acb9a32 100644
--- a/src/composables/useTippy.ts
+++ b/src/composables/useTippy.ts
@@ -1,21 +1,62 @@
-import tippy, { Instance } from 'tippy.js'
-import { ref, onMounted, Ref, isRef } from 'vue'
+import tippy, { Instance, Props, Content } from 'tippy.js'
+import { ref, onMounted, Ref, isRef, isVNode, render, watch } from 'vue'
import { TippyOptions } from '../types'
export function useTippy(
el: Element | Ref | Ref,
- opts: Partial = {}
+ opts: TippyOptions = {}
) {
const instance = ref()
+ let container: Element | null = null
+
+ const getContainer = () => {
+ if (container) return container
+ container = document.createElement('fragment')
+ return container
+ }
+
onMounted(() => {
if (!el) return
let target = isRef(el) ? el.value : el
+ let options = { ...opts }
- target && (instance.value = tippy(target, opts))
+ if (isRef(options.content)) {
+ options.content = options.content.value
+ }
+
+ if (isVNode(options.content)) {
+ render(options.content, getContainer())
+
+ options.content = () => getContainer()
+ }
+ target && (instance.value = tippy(target, options as Props))
})
+ if (isRef(opts.content)) {
+ watch(
+ opts.content,
+ () => {
+ if (!instance.value) return
+
+ let content = opts.content
+
+ if (isRef(opts.content)) {
+ content = opts.content.value
+ }
+
+ if (isVNode(content)) {
+ render(content, getContainer())
+
+ content = () => getContainer()
+ }
+ instance.value.setContent(content as Content)
+ },
+ { immediate: false }
+ )
+ }
+
return {
tippy: instance,
}
diff --git a/src/types/index.ts b/src/types/index.ts
index 3eedeec..db1b7dd 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,3 +1,8 @@
-import { Props } from 'tippy.js'
+import { Props, Content } from 'tippy.js'
+import { VNode, Ref } from 'vue'
-export declare type TippyOptions = Props
+export declare type TippyOptions = Partial<
+ Omit & {
+ content: Content | VNode | Ref
+ }
+>
diff --git a/yarn.lock b/yarn.lock
index b11db98..ba1feaa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -647,17 +647,6 @@ atob@^2.1.2:
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
-babel-loader@^8.1.0:
- version "8.1.0"
- resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
- integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
- dependencies:
- find-cache-dir "^2.1.0"
- loader-utils "^1.4.0"
- mkdirp "^0.5.3"
- pify "^4.0.1"
- schema-utils "^2.6.5"
-
balanced-match@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -4848,7 +4837,7 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"
-schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0:
+schema-utils@^2.6.6, schema-utils@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==