fix(tooltip,hovercard): close when scrollable ancestor is scrolled (#2557)

zernonia · claude · web-flow · commit a987ad507d5f · 2026-04-01T15:56:41.000+08:00
Tooltip already had a window scroll listener but lacked `{ capture: true }`, so it only fired for page-level scroll and missed scrolls on inner overflow containers (scroll events don't bubble). HoverCard had no scroll handler at all. Fixes #2543 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/packages/core/src/HoverCard/HoverCardContentImpl.vue b/packages/core/src/HoverCard/HoverCardContentImpl.vue
@@ -9,6 +9,7 @@ export interface HoverCardContentImplProps extends PopperContentProps {}
 </script>
 
 <script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
 import { nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { DismissableLayer } from '@/DismissableLayer'
 import { PopperContent } from '@/Popper'
@@ -68,6 +69,12 @@ onMounted(() => {
     const tabbables = getTabbableNodes(contentElement.value)
     tabbables.forEach(tabbable => tabbable.setAttribute('tabindex', '-1'))
   }
+
+  useEventListener(window, 'scroll', (event: Event) => {
+    const target = event.target as HTMLElement
+    if (target?.contains(rootContext.triggerElement.value!))
+      rootContext.onDismiss()
+  }, { capture: true })
 })
 
 onUnmounted(() => {
diff --git a/packages/core/src/Tooltip/TooltipContentImpl.vue b/packages/core/src/Tooltip/TooltipContentImpl.vue
@@ -85,7 +85,7 @@ onMounted(() => {
     const target = event.target as HTMLElement
     if (target?.contains(rootContext.trigger.value!))
       rootContext.onClose()
-  })
+  }, { capture: true })
   // Close this tooltip if another one opens
   useEventListener(window, TOOLTIP_OPEN, rootContext.onClose)
 })
