fix: make tooltip reaction faster/snappier

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;

packages/manage/head/fullscreen.vue

@@ -1,5 +1,14 @@
 <template>
-    <el-tooltip effect="dark" :content="t('head.fullScreen')" placement="bottom">
+  <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 />
@@ -23,8 +32,12 @@ const fullscreen = () => {
       document.exitFullscreen();
     }
   }
-}
+};
 
-onMounted(() => { });
+onMounted(() => {});
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.non-interactive-tooltip {
+  pointer-events: none !important;
+}
+</style>

packages/manage/head/lang-change.vue

@@ -1,11 +1,20 @@
 <template>
-    <el-tooltip effect="dark" :content="t('head.language')" placement="left">
+  <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-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>
@@ -20,10 +29,14 @@ const { t, setLocale } = useI18n();
 
 const { state, commit, dispatch } = useStore();
 
-const changeLang = type => {
+const changeLang = (type) => {
   setLocale(type);
-}
+};
 
-onMounted(() => { });
+onMounted(() => {});
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.non-interactive-tooltip {
+  pointer-events: none !important;
+}
+</style>

packages/manage/head/size-change.vue

@@ -1,12 +1,21 @@
 <template>
-    <el-tooltip effect="dark" :content="t('head.size')" placement="left">
+  <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-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>
@@ -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>
+<style lang="scss" scoped>
+.non-interactive-tooltip {
+  pointer-events: none !important;
+}
+</style>

packages/manage/head/style-change.vue

@@ -1,10 +1,18 @@
 <template>
-    <el-tooltip effect="dark" :content="t('head.changeStyle')" placement="left">
+  <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>
@@ -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>
+<style lang="scss" scoped>
+.non-interactive-tooltip {
+  pointer-events: none !important;
+}
+</style>