From d8726f9bd2d698581e8dd31aec59f148d6dc06fa Mon Sep 17 00:00:00 2001
From: hechang27-sprt <hechang27@outlook.com>
Date: Mon, 19 Jan 2026 13:52:40 +0800
Subject: [PATCH] fix: make tooltip reaction faster/snappier

---
 packages/base/item/buttonWithTooltip.vue |   9 +-
 packages/manage/head/fullscreen.vue      |  43 ++++++----
 packages/manage/head/lang-change.vue     |  45 ++++++----
 packages/manage/head/size-change.vue     |  49 +++++++----
 packages/manage/head/style-change.vue    | 100 +++++++++++++----------
 5 files changed, 149 insertions(+), 97 deletions(-)

diff --git a/packages/base/item/buttonWithTooltip.vue b/packages/base/item/buttonWithTooltip.vue
index 4b5823a..59ea597 100644
--- a/packages/base/item/buttonWithTooltip.vue
+++ b/packages/base/item/buttonWithTooltip.vue
@@ -3,7 +3,8 @@
     :content="props.tooltip"
     :disabled="props.disabled || !props.tooltip"
     :show-after="0"
-    :hide-after="0"
+    :hide-after="10"
+    transition=""
     :popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
     popper-class="non-interactive-tooltip"
   >
@@ -40,11 +41,11 @@ const hasSlotContent = computed(() => {
   if (!slots.default) return false;
   const content = slots.default();
   // Filter out comments and empty text nodes
-  const meaningfulContent = content.filter(vnode => {
+  const meaningfulContent = content.filter((vnode) => {
     // Comment nodes
-    if (vnode.type === Symbol.for('v-cmt')) return false;
+    if (vnode.type === Symbol.for("v-cmt")) return false;
     // Text nodes that are empty or whitespace only
-    if (vnode.type === Symbol.for('v-txt') && (!vnode.children || String(vnode.children).trim() === '')) return false;
+    if (vnode.type === Symbol.for("v-txt") && (!vnode.children || String(vnode.children).trim() === "")) return false;
     return true;
   });
   return meaningfulContent.length > 0;
diff --git a/packages/manage/head/fullscreen.vue b/packages/manage/head/fullscreen.vue
index 31fe5e2..5d4f7e2 100644
--- a/packages/manage/head/fullscreen.vue
+++ b/packages/manage/head/fullscreen.vue
@@ -1,10 +1,19 @@
 <template>
-    <el-tooltip effect="dark" :content="t('head.fullScreen')" placement="bottom">
-        <!-- <el-button class="head-icon" @click="fullscreen"  icon="fullscreen" :size="state.size.size" circle></el-button> -->
-        <el-icon @click="fullscreen" class="head-icon">
-            <FullScreen />
-        </el-icon>
-    </el-tooltip>
+  <el-tooltip
+    effect="dark"
+    :content="t('head.fullScreen')"
+    placement="bottom"
+    :show-after="0"
+    :hide-after="10"
+    transition=""
+    :popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
+    popper-class="non-interactive-tooltip"
+  >
+    <!-- <el-button class="head-icon" @click="fullscreen"  icon="fullscreen" :size="state.size.size" circle></el-button> -->
+    <el-icon @click="fullscreen" class="head-icon">
+      <FullScreen />
+    </el-icon>
+  </el-tooltip>
 </template>
 
 <script lang="ts" setup>
@@ -16,15 +25,19 @@ const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
 
 const fullscreen = () => {
-    if (!document.fullscreenElement) {
-        document.documentElement.requestFullscreen();
-    } else {
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        }
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
     }
-}
+  }
+};
 
-onMounted(() => { });
+onMounted(() => {});
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.non-interactive-tooltip {
+  pointer-events: none !important;
+}
+</style>
diff --git a/packages/manage/head/lang-change.vue b/packages/manage/head/lang-change.vue
index 087fe41..3df6555 100644
--- a/packages/manage/head/lang-change.vue
+++ b/packages/manage/head/lang-change.vue
@@ -1,15 +1,24 @@
 <template>
-    <el-tooltip effect="dark" :content="t('head.language')" placement="left">
-        <el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
-            <el-button icon="Flag" :size="state.size.size" circle></el-button>
-            <template #dropdown>
-                <el-dropdown-menu>
-                    <el-dropdown-item @click="changeLang('zh')">{{ t('head.zh') }}</el-dropdown-item>
-                    <el-dropdown-item @click="changeLang('en')">{{ t('head.en') }}</el-dropdown-item>
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>
-    </el-tooltip>
+  <el-tooltip
+    effect="dark"
+    :content="t('head.language')"
+    placement="bottom"
+    :show-after="0"
+    :hide-after="10"
+    transition=""
+    :popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
+    popper-class="non-interactive-tooltip"
+  >
+    <el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
+      <el-button icon="Flag" :size="state.size.size" circle></el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="changeLang('zh')">{{ t("head.zh") }}</el-dropdown-item>
+          <el-dropdown-item @click="changeLang('en')">{{ t("head.en") }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-tooltip>
 </template>
 
 <script lang="ts" setup>
@@ -20,10 +29,14 @@ const { t, setLocale } = useI18n();
 
 const { state, commit, dispatch } = useStore();
 
-const changeLang = type => {
-    setLocale(type);
-}
+const changeLang = (type) => {
+  setLocale(type);
+};
 
-onMounted(() => { });
+onMounted(() => {});
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.non-interactive-tooltip {
+  pointer-events: none !important;
+}
+</style>
diff --git a/packages/manage/head/size-change.vue b/packages/manage/head/size-change.vue
index 50a5303..4e2d355 100644
--- a/packages/manage/head/size-change.vue
+++ b/packages/manage/head/size-change.vue
@@ -1,16 +1,25 @@
 <template>
-    <el-tooltip effect="dark" :content="t('head.size')" placement="left">
-        <el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
-            <el-button icon="Switch" :size="state.size.size" circle></el-button>
-            <template #dropdown>
-                <el-dropdown-menu>
-                    <el-dropdown-item @click="changeSize('small')">{{ t('head.small') }}</el-dropdown-item>
-                    <el-dropdown-item @click="changeSize('normal')">{{ t('head.normal') }}</el-dropdown-item>
-                    <el-dropdown-item @click="changeSize('large')">{{ t('head.large') }}</el-dropdown-item>
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>
-    </el-tooltip>
+  <el-tooltip
+    effect="dark"
+    :content="t('head.size')"
+    placement="bottom"
+    :show-after="0"
+    :hide-after="10"
+    transition=""
+    :popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
+    popper-class="non-interactive-tooltip"
+  >
+    <el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
+      <el-button icon="Switch" :size="state.size.size" circle></el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="changeSize('small')">{{ t("head.small") }}</el-dropdown-item>
+          <el-dropdown-item @click="changeSize('normal')">{{ t("head.normal") }}</el-dropdown-item>
+          <el-dropdown-item @click="changeSize('large')">{{ t("head.large") }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-tooltip>
 </template>
 
 <script lang="ts" setup>
@@ -22,11 +31,15 @@ const { t } = useI18n();
 
 const { state, commit, dispatch } = useStore();
 
-const changeSize = type => {
-    commit('updateState', ['size', Size[type]])
-    commit('initSize', [window.innerHeight, window.innerWidth]);
-}
+const changeSize = (type) => {
+  commit("updateState", ["size", Size[type]]);
+  commit("initSize", [window.innerHeight, window.innerWidth]);
+};
 
-onMounted(() => { });
+onMounted(() => {});
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.non-interactive-tooltip {
+  pointer-events: none !important;
+}
+</style>
diff --git a/packages/manage/head/style-change.vue b/packages/manage/head/style-change.vue
index 1cfce7f..02da7e7 100644
--- a/packages/manage/head/style-change.vue
+++ b/packages/manage/head/style-change.vue
@@ -1,48 +1,56 @@
 <template>
-    <el-tooltip effect="dark" :content="t('head.changeStyle')" placement="left">
-        <el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
-            <el-button :size="state.size.size" icon="Opportunity" circle></el-button>
-            <template #dropdown>
-                <el-dropdown-menu>
-
-                    <!-- <el-dropdown-item v-for="item in Styles" @click="changeStyle(item.name)">
+  <el-tooltip
+    effect="dark"
+    :content="t('head.changeStyle')"
+    placement="bottom"
+    :show-after="0"
+    :hide-after="10"
+    transition=""
+    :popper-options="{ modifiers: [{ name: 'eventListeners', enabled: false }] }"
+    popper-class="non-interactive-tooltip"
+  >
+    <el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
+      <el-button :size="state.size.size" icon="Opportunity" circle></el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <!-- <el-dropdown-item v-for="item in Styles" @click="changeStyle(item.name)">
                         <el-tooltip effect="dark" :content="t(item.i18n)" placement="left">
                             <component class="icon" :is="item.icon"></component>
                         </el-tooltip>
                     </el-dropdown-item> -->
 
-                    <el-dropdown-item @click="changeStyle('plainb')">
-                        <el-tooltip effect="dark" :content="t('styles[3]')" placement="left">
-                            <el-icon class="dropdown-icon">
-                                <Sunset />
-                            </el-icon>
-                        </el-tooltip>
-                    </el-dropdown-item>
-                    <el-dropdown-item @click="changeStyle('plain')">
-                        <el-tooltip effect="dark" :content="t('styles[0]')" placement="left">
-                            <el-icon class="dropdown-icon">
-                                <Sunset />
-                            </el-icon>
-                        </el-tooltip>
-                    </el-dropdown-item>
-                    <el-dropdown-item @click="changeStyle('light')">
-                        <el-tooltip effect="dark" :content="t('styles[1]')" placement="left">
-                            <el-icon class="dropdown-icon">
-                                <Sunny />
-                            </el-icon>
-                        </el-tooltip>
-                    </el-dropdown-item>
-                    <el-dropdown-item @click="changeStyle('dark')">
-                        <el-tooltip effect="dark" :content="t('styles[2]')" placement="left">
-                            <el-icon class="dropdown-icon">
-                                <MoonNight />
-                            </el-icon>
-                        </el-tooltip>
-                    </el-dropdown-item>
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>
-    </el-tooltip>
+          <el-dropdown-item @click="changeStyle('plainb')">
+            <el-tooltip effect="dark" :content="t('styles[3]')" placement="left">
+              <el-icon class="dropdown-icon">
+                <Sunset />
+              </el-icon>
+            </el-tooltip>
+          </el-dropdown-item>
+          <el-dropdown-item @click="changeStyle('plain')">
+            <el-tooltip effect="dark" :content="t('styles[0]')" placement="left">
+              <el-icon class="dropdown-icon">
+                <Sunset />
+              </el-icon>
+            </el-tooltip>
+          </el-dropdown-item>
+          <el-dropdown-item @click="changeStyle('light')">
+            <el-tooltip effect="dark" :content="t('styles[1]')" placement="left">
+              <el-icon class="dropdown-icon">
+                <Sunny />
+              </el-icon>
+            </el-tooltip>
+          </el-dropdown-item>
+          <el-dropdown-item @click="changeStyle('dark')">
+            <el-tooltip effect="dark" :content="t('styles[2]')" placement="left">
+              <el-icon class="dropdown-icon">
+                <MoonNight />
+              </el-icon>
+            </el-tooltip>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-tooltip>
 </template>
 
 <script lang="ts" setup>
@@ -54,10 +62,14 @@ const { t } = useI18n();
 
 const { state, commit, dispatch } = useStore();
 
-const changeStyle = type => {
-    commit('updateState', ['style', Styles[type]]);
-}
+const changeStyle = (type) => {
+  commit("updateState", ["style", Styles[type]]);
+};
 
-onMounted(() => { });
+onMounted(() => {});
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.non-interactive-tooltip {
+  pointer-events: none !important;
+}
+</style>