From 2bfa01988c367b51ca5dea2bf4cd5cdafbcded65 Mon Sep 17 00:00:00 2001
From: Julian Hundeloh <jaulz@users.noreply.github.com>
Date: Thu, 16 Dec 2021 14:59:49 +0100
Subject: [PATCH 1/3] fix: avoid rendering content in SSR

---
 src/components/Tippy.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Tippy.ts b/src/components/Tippy.ts
index d7aec03..94d5667 100644
--- a/src/components/Tippy.ts
+++ b/src/components/Tippy.ts
@@ -68,6 +68,7 @@ const TippyComponent = defineComponent({
   setup(props, { slots }) {
     const elem = ref<Element>()
     const contentElem = ref<Element>()
+    const mounted = ref(false)
 
     let options = { ...props } as TippyOptions;
 
@@ -91,17 +92,19 @@ const TippyComponent = defineComponent({
     const tippy = useTippy(target, options)
 
     onMounted(() => {
+      mounted.value = true
+
       if (slots.content)
         tippy.setContent(() => contentElem.value)
     })
 
-    return { elem, contentElem, ...tippy }
+    return { elem, contentElem, mounted, ...tippy }
   },
   render() {
     let slot = this.$slots.default ? this.$slots.default(this) : []
     return h(this.tag, { ref: 'elem', 'data-v-tippy': '' }, this.$slots.content ? [
       slot,
-      h(this.contentTag, { ref: 'contentElem', class: this.contentClass }, this.$slots.content(this))
+      this.mounted ? h(this.contentTag, { ref: 'contentElem', class: this.contentClass }, this.$slots.content(this)) : undefined,
     ] : slot)
   },
 })

From c4299be235911f9ab416ef8b4e459f562a75199b Mon Sep 17 00:00:00 2001
From: Julian Hundeloh <jaulz@users.noreply.github.com>
Date: Thu, 16 Dec 2021 16:18:47 +0100
Subject: [PATCH 2/3] fix: use nextTick to get visible element

---
 src/components/Tippy.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Tippy.ts b/src/components/Tippy.ts
index 94d5667..2c814b9 100644
--- a/src/components/Tippy.ts
+++ b/src/components/Tippy.ts
@@ -1,4 +1,4 @@
-import { defineComponent, ref, h, ComponentObjectPropsOptions, onMounted } from 'vue'
+import { defineComponent, ref, h, ComponentObjectPropsOptions, onMounted, nextTick } from 'vue'
 import { TippyOptions } from '../types'
 import { useTippy } from '../composables'
 import tippy, { DefaultProps } from 'tippy.js'
@@ -94,8 +94,10 @@ const TippyComponent = defineComponent({
     onMounted(() => {
       mounted.value = true
 
-      if (slots.content)
-        tippy.setContent(() => contentElem.value)
+      nextTick(() => {
+        if (slots.content)
+          tippy.setContent(() => contentElem.value)
+      })
     })
 
     return { elem, contentElem, mounted, ...tippy }
@@ -104,7 +106,7 @@ const TippyComponent = defineComponent({
     let slot = this.$slots.default ? this.$slots.default(this) : []
     return h(this.tag, { ref: 'elem', 'data-v-tippy': '' }, this.$slots.content ? [
       slot,
-      this.mounted ? h(this.contentTag, { ref: 'contentElem', class: this.contentClass }, this.$slots.content(this)) : undefined,
+      h(this.contentTag, { ref: 'contentElem', style: { visibility: this.mounted ? 'inherit' : 'hidden' }, class: this.contentClass }, this.$slots.content(this)),
     ] : slot)
   },
 })

From 24828b441db42cc6a6015930820f892cbf9076c7 Mon Sep 17 00:00:00 2001
From: Julian Hundeloh <jaulz@users.noreply.github.com>
Date: Thu, 16 Dec 2021 16:23:23 +0100
Subject: [PATCH 3/3] fix: use display style

---
 src/components/Tippy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Tippy.ts b/src/components/Tippy.ts
index 2c814b9..edeb737 100644
--- a/src/components/Tippy.ts
+++ b/src/components/Tippy.ts
@@ -106,7 +106,7 @@ const TippyComponent = defineComponent({
     let slot = this.$slots.default ? this.$slots.default(this) : []
     return h(this.tag, { ref: 'elem', 'data-v-tippy': '' }, this.$slots.content ? [
       slot,
-      h(this.contentTag, { ref: 'contentElem', style: { visibility: this.mounted ? 'inherit' : 'hidden' }, class: this.contentClass }, this.$slots.content(this)),
+      h(this.contentTag, { ref: 'contentElem', style: { display: this.mounted ? 'inherit' : 'none' }, class: this.contentClass }, this.$slots.content(this)),
     ] : slot)
   },
 })