From 1ec01130d8b8c440aca0d065253d292660dbccba Mon Sep 17 00:00:00 2001
From: Jeremy <15975785+jw-foss@users.noreply.github.com>
Date: Sun, 6 Nov 2022 14:46:35 +0800
Subject: [PATCH] fix(docs): [vp-api-typing] (#10467)

* Add ClientOnly to wrap tooltip to prevent hydration issue.

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
---
 .../components/globals/vp-api-typing.vue      | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/docs/.vitepress/vitepress/components/globals/vp-api-typing.vue b/docs/.vitepress/vitepress/components/globals/vp-api-typing.vue
index 995edfdf9d..c5fc038368 100644
--- a/docs/.vitepress/vitepress/components/globals/vp-api-typing.vue
+++ b/docs/.vitepress/vitepress/components/globals/vp-api-typing.vue
@@ -12,22 +12,24 @@ defineProps({
     <code class="api-typing mr-1">
       {{ type }}
     </code>
-    <el-tooltip v-if="details" effect="light" trigger="click">
-      <el-button text :icon="Warning" class="p-2 text-4" />
-      <template #content>
-        <slot>
-          <div class="m-1">
-            <code
-              style="
-                color: var(--code-tooltip-color);
-                background-color: var(--code-tooltip-bg-color);
-              "
-            >
-              {{ details }}
-            </code>
-          </div>
-        </slot>
-      </template>
-    </el-tooltip>
+    <ClientOnly>
+      <ElTooltip v-if="details" effect="light" trigger="click">
+        <ElButton text :icon="Warning" class="p-2 text-4" />
+        <template #content>
+          <slot>
+            <div class="m-1">
+              <code
+                style="
+                  color: var(--code-tooltip-color);
+                  background-color: var(--code-tooltip-bg-color);
+                "
+              >
+                {{ details }}
+              </code>
+            </div>
+          </slot>
+        </template>
+      </ElTooltip>
+    </ClientOnly>
   </span>
 </template>