From f89ffb6c1ed9631abeac9f3ac00c2c9e62da3ba5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 16 Sep 2022 17:18:14 +0530
Subject: [PATCH] feat(nc-gui): Added alt+hover to show table name in ERD

---
 packages/nc-gui/components/erd/TableNode.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 78f9dfb0b3..c9aa469b69 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -42,15 +42,18 @@ const relatedColumnId = (col: Record<string, any>) =>
 
 <template>
   <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
-    <div
-      class="text-gray-600 text-md py-2 border-b-1 border-gray-200 rounded-t-lg w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
-    >
-      <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
-      <MdiView v-else class="text-primary" />
-      <div class="flex pl-1.5">
-        {{ data.title }}
+    <GeneralTooltip modifier-key="Alt">
+      <template #title> {{ data.table_name }} </template>
+      <div
+        class="text-gray-600 text-md py-2 border-b-1 border-gray-200 rounded-t-lg w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
+      >
+        <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
+        <MdiView v-else class="text-primary" />
+        <div class="flex pl-1.5">
+          {{ data.title }}
+        </div>
       </div>
-    </div>
+    </GeneralTooltip>
     <div>
       <div class="keys mb-1">
         <div v-for="col in pkAndFkColumns" :key="col.title" class="w-full border-b-1 py-2 border-gray-100">