From 96e327847246f3edf9501fbb0fa237f56b38d367 Mon Sep 17 00:00:00 2001
From: dhj-l <126545033+dhj-l@users.noreply.github.com>
Date: Thu, 21 Aug 2025 07:11:58 +0800
Subject: [PATCH] fix(components): [table] show-overflow-tooltip dynamic switch
 (#21811)

* fix(components): el-table-column: show-overflow-tooltip dynamic switch

* fix(components): el-table-column: show-overflow-tooltip dynamic switch

* test: add test case

* chore: remove previous tests

---------

Co-authored-by: Dsaquel <291874700n@gmail.com>
---
 .../components/table/__tests__/table.test.ts  | 50 +++++++++++++++++++
 .../table/src/table-body/events-helper.ts     |  3 ++
 packages/components/table/src/util.ts         |  8 ++-
 3 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/components/table/__tests__/table.test.ts b/packages/components/table/__tests__/table.test.ts
index 03d87e4a2a..d8236cf9d0 100644
--- a/packages/components/table/__tests__/table.test.ts
+++ b/packages/components/table/__tests__/table.test.ts
@@ -2337,6 +2337,56 @@ describe('Table.vue', () => {
     mockCellRect2.mockRestore()
   })
 
+  it('should cleanup tooltip dynamically', async () => {
+    const mockRangeRect = vi
+      .spyOn(Range.prototype, 'getBoundingClientRect')
+      .mockReturnValue({
+        width: 150,
+        height: 30,
+      } as DOMRect)
+
+    const wrapper = mount({
+      components: {
+        ElTable,
+        ElTableColumn,
+      },
+      template: `
+        <el-table :data="testData">
+          <el-table-column :show-overflow-tooltip="showOverflowTooltip" class-name="overflow_tooltip" prop="name" label="name"/>
+        </el-table>
+      `,
+
+      data() {
+        return {
+          testData: getTestData(),
+          showOverflowTooltip: true,
+        }
+      },
+    })
+
+    await doubleWait()
+    const tr = wrapper.findAll('.overflow_tooltip')
+    const mockCellRect = vi
+      .spyOn(tr[1].find('.cell').element, 'getBoundingClientRect')
+      .mockReturnValue({
+        width: 100,
+        height: 30,
+      } as DOMRect)
+    await tr[1].trigger('mouseenter')
+    await rAF()
+    expect(wrapper.find('.el-popper').exists()).toBe(true)
+    await wrapper.setData({ showOverflowTooltip: false })
+    await tr[1].trigger('mouseleave')
+    await rAF()
+    await tr[1].trigger('mouseenter')
+    await rAF()
+    expect(wrapper.find('.el-popper').exists()).toBe(false)
+
+    mockRangeRect.mockRestore()
+    mockCellRect.mockRestore()
+    wrapper.unmount()
+  })
+
   it('use-tooltip-formatter', async () => {
     const testData = getTestData() as any
     const mockRangeRect = vi
diff --git a/packages/components/table/src/table-body/events-helper.ts b/packages/components/table/src/table-body/events-helper.ts
index 79df90d3f3..81d815fe4f 100644
--- a/packages/components/table/src/table-body/events-helper.ts
+++ b/packages/components/table/src/table-body/events-helper.ts
@@ -125,6 +125,9 @@ function useEvents<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {
     }
 
     if (!tooltipOptions) {
+      if (removePopper?.trigger === cell) {
+        removePopper?.()
+      }
       return
     }
 
diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts
index b55666f1f2..f0bf291e6f 100644
--- a/packages/components/table/src/util.ts
+++ b/packages/components/table/src/util.ts
@@ -507,8 +507,14 @@ export function createTablePopper<T extends DefaultRow>(
   vm.component!.exposed!.onOpen()
   const scrollContainer = parentNode?.querySelector(`.${ns}-scrollbar__wrap`)
   removePopper = () => {
+    if (vm.component?.exposed?.onClose) {
+      vm.component.exposed.onClose()
+    }
     render(null, container)
-    scrollContainer?.removeEventListener('scroll', removePopper!)
+    const currentRemovePopper = removePopper as RemovePopperFn
+    scrollContainer?.removeEventListener('scroll', currentRemovePopper)
+    currentRemovePopper.trigger = undefined
+    currentRemovePopper.vm = undefined
     removePopper = null
   }
   removePopper.trigger = trigger ?? undefined