From 148c137445d7a5666da88f5565eb23904c06d14d Mon Sep 17 00:00:00 2001
From: dopamine <coderzyou@gmail.com>
Date: Thu, 24 Apr 2025 23:04:48 +0800
Subject: [PATCH] fix(components): [tooltip] remove some references in time
 (#20495)

* fix(components): [tooltip] remove references to stopHandle and popperInstance in time

* fix
---
 .../popper/src/composables/use-content.ts     |  4 +++-
 packages/components/tooltip/src/content.vue   | 20 ++++++++-----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/components/popper/src/composables/use-content.ts b/packages/components/popper/src/composables/use-content.ts
index fbc9aec8eb..8b63988be0 100644
--- a/packages/components/popper/src/composables/use-content.ts
+++ b/packages/components/popper/src/composables/use-content.ts
@@ -61,7 +61,9 @@ export const usePopperContent = (props: PopperContentProps) => {
   const { attributes, state, styles, update, forceUpdate, instanceRef } =
     usePopper(computedReference, contentRef, options)
 
-  watch(instanceRef, (instance) => (popperInstanceRef.value = instance))
+  watch(instanceRef, (instance) => (popperInstanceRef.value = instance), {
+    flush: 'sync',
+  })
 
   onMounted(() => {
     watch(
diff --git a/packages/components/tooltip/src/content.vue b/packages/components/tooltip/src/content.vue
index 6ea329f1ee..8d34ca47ad 100644
--- a/packages/components/tooltip/src/content.vue
+++ b/packages/components/tooltip/src/content.vue
@@ -44,7 +44,7 @@
 
 <script lang="ts" setup>
 import { computed, inject, onBeforeUnmount, ref, unref, watch } from 'vue'
-import { onClickOutside } from '@vueuse/core'
+import { computedEager, onClickOutside } from '@vueuse/core'
 import { useNamespace, usePopperContainerId } from '@element-plus/hooks'
 import { composeEventHandlers } from '@element-plus/utils'
 import { ElPopperContent } from '@element-plus/components/popper'
@@ -65,6 +65,7 @@ const { selector } = usePopperContainerId()
 const ns = useNamespace('tooltip')
 
 const contentRef = ref<PopperContentInstance>()
+const popperContentRef = computedEager(() => contentRef.value?.popperContentRef)
 let stopHandle: ReturnType<typeof onClickOutside>
 const {
   controlled,
@@ -143,18 +144,13 @@ const onBeforeLeave = () => {
 
 const onAfterShow = () => {
   onShow()
-  stopHandle = onClickOutside(
-    computed(() => {
-      return contentRef.value?.popperContentRef
-    }),
-    () => {
-      if (unref(controlled)) return
-      const $trigger = unref(trigger)
-      if ($trigger !== 'hover') {
-        onClose()
-      }
+  stopHandle = onClickOutside(popperContentRef, () => {
+    if (unref(controlled)) return
+    const $trigger = unref(trigger)
+    if ($trigger !== 'hover') {
+      onClose()
     }
-  )
+  })
 }
 
 const onBlur = () => {