From e6b1b0c63db41aa86f09e39c5cf690db202dc3bb Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Fri, 27 Oct 2023 11:09:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A9=B1=E9=87=87=E5=88=97=E8=A1=A8=E5=8A=A0to?=
 =?UTF-8?q?oltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/draw-app/dialogs/CiCjList.vue | 18 ++++++++++++++++--
 src/components/draw-app/dialogs/CiQdList.vue | 18 ++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/draw-app/dialogs/CiCjList.vue b/src/components/draw-app/dialogs/CiCjList.vue
index 4662c2a..b82e8ee 100644
--- a/src/components/draw-app/dialogs/CiCjList.vue
+++ b/src/components/draw-app/dialogs/CiCjList.vue
@@ -19,9 +19,16 @@
         <span v-else-if="row == 1 || col == 1">
           {{ row == 1 ? col - 1 : row - 1 }}</span
         >
-        <span v-else>
+        <div v-else @mouseover="onMouseOver" @mouseleave="showTooltip = false">
           {{ map.get(`${row - 1}-${col - 1}`) }}
-        </span>
+          <q-tooltip
+            anchor="bottom middle"
+            self="bottom middle"
+            v-if="showTooltip"
+          >
+            {{ map.get(`${row - 1}-${col - 1}`) }}
+          </q-tooltip>
+        </div>
       </div>
     </div>
     <template v-slot:titleButton>
@@ -163,6 +170,13 @@ function updateMap() {
     });
   });
 }
+
+const showTooltip = ref(false);
+function onMouseOver(e: MouseEvent) {
+  if ((e.target as HTMLElement).clientHeight > 30) {
+    showTooltip.value = true;
+  }
+}
 </script>
 
 <style scoped>
diff --git a/src/components/draw-app/dialogs/CiQdList.vue b/src/components/draw-app/dialogs/CiQdList.vue
index de62423..6432dee 100644
--- a/src/components/draw-app/dialogs/CiQdList.vue
+++ b/src/components/draw-app/dialogs/CiQdList.vue
@@ -19,9 +19,16 @@
         <span v-else-if="row == 1 || col == 1">
           {{ row == 1 ? col - 1 : row - 1 }}</span
         >
-        <span v-else>
+        <div v-else @mouseover="onMouseOver" @mouseleave="showTooltip = false">
           {{ map.get(`${row - 1}-${col - 1}`) }}
-        </span>
+          <q-tooltip
+            anchor="bottom middle"
+            self="bottom middle"
+            v-if="showTooltip"
+          >
+            {{ map.get(`${row - 1}-${col - 1}`) }}
+          </q-tooltip>
+        </div>
       </div>
     </div>
     <template v-slot:titleButton>
@@ -159,6 +166,13 @@ function updateMap() {
     });
   });
 }
+
+const showTooltip = ref(false);
+function onMouseOver(e: MouseEvent) {
+  if ((e.target as HTMLElement).clientHeight > 30) {
+    showTooltip.value = true;
+  }
+}
 </script>
 
 <style scoped>