fix(core): floating tooltip hide

antfu · antfu · commit 03a7c83ea443 · 2026-01-14T15:02:10.000+09:00
diff --git a/packages/core/src/client/webcomponents/components/FloatingTooltip.ts b/packages/core/src/client/webcomponents/components/FloatingTooltip.ts
@@ -1,5 +1,6 @@
 import type { FloatingTooltip } from '../state/floating-tooltip'
-import { computed, defineComponent, h, ref, watchEffect } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, defineComponent, h, ref, watch } from 'vue'
 import { useFloatingTooltip } from '../state/floating-tooltip'
 
 // @unocss-include
@@ -11,16 +12,12 @@ const FloatingTooltipComponent = defineComponent({
   name: 'FloatingTooltip',
   setup() {
     const current = useFloatingTooltip()
-    const box = ref<FloatingTooltip>({
-      render: '',
-      width: 0,
-      height: 0,
-      left: 0,
-      top: 0,
-    })
+    const box = ref<FloatingTooltip | null>(null)
 
     // guess alignment of the tooltip based on viewport position
     const align = computed<'bottom' | 'left' | 'right' | 'top'>(() => {
+      if (!box.value)
+        return 'bottom'
       const vw = window.innerWidth
       const vh = window.innerHeight
       if (box.value.left < DETECT_MARGIN)
@@ -35,6 +32,8 @@ const FloatingTooltipComponent = defineComponent({
     })
 
     const style = computed(() => {
+      if (!box.value)
+        return {}
       switch (align.value) {
         case 'bottom': {
           return {
@@ -70,14 +69,25 @@ const FloatingTooltipComponent = defineComponent({
       }
     })
 
-    watchEffect(() => {
-      if (current.value) {
-        box.value = { ...current.value }
-      }
-    })
+    const clearThrottled = useDebounceFn(() => {
+      if (current.value == null)
+        box.value = null
+    }, 800)
+
+    watch(
+      current,
+      (value) => {
+        if (value) {
+          box.value = { ...value }
+        }
+        else {
+          clearThrottled()
+        }
+      },
+    )
 
     return () => {
-      if (!box.value.render)
+      if (!box.value?.render)
         return null
 
       const content = typeof box.value.render === 'string' ? h('span', box.value.render) : box.value.render()
diff --git a/packages/core/src/client/webcomponents/utils/iconify.ts b/packages/core/src/client/webcomponents/utils/iconify.ts
@@ -18,7 +18,7 @@ export async function getIconifySvg(collection: string, icon: string) {
   return promise
 
   async function _get() {
-    const url = `https://api.iconify.design/${collection}/${icon}.svg?color=currentColor&width=full`
+    const url = `https://api.iconify.design/${collection}/${icon}.svg?color=currentColor&width=100%`
     const svg = await fetch(url).then(res => res.text())
     return purify.sanitize(svg)
   }

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export async function getIconifySvg(collection: string, icon: string) {`
`18`	`18`	`return promise`
`19`	`19`
`20`	`20`	`async function _get() {`
`21`		- const url = `https://api.iconify.design/${collection}/${icon}.svg?color=currentColor&width=full`
	`21`	+ const url = `https://api.iconify.design/${collection}/${icon}.svg?color=currentColor&width=100%`
`22`	`22`	`const svg = await fetch(url).then(res => res.text())`
`23`	`23`	`return purify.sanitize(svg)`
`24`	`24`	`}`