From 9207eda4c98368d9b747fb3ccff4a37b70b60fc7 Mon Sep 17 00:00:00 2001
From: musharaf <musharaf@nocodb.com>
Date: Thu, 30 Nov 2023 11:59:51 +0530
Subject: [PATCH] fix : Used NcTooltip

---
 .../components/smartsheet/details/Fields.vue  | 34 ++++++++++---------
 .../components/smartsheet/header/Cell.vue     | 28 ++++++++-------
 .../smartsheet/header/VirtualCell.vue         | 11 +++---
 3 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 2888bde0b6..97e399ed76 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -814,16 +814,17 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(field, activeField),
                       }"
                     />
-                    <a-tooltip :title="fieldState(field)?.title || field.title">
-                      <span
-                        :class="{
-                          'text-brand-500': compareCols(field, activeField),
-                        }"
-                        class="truncate flex-1"
-                      >
+                    <NcTooltip
+                      :class="{
+                        'text-brand-500': compareCols(field, activeField),
+                      }"
+                      class="truncate flex-1"
+                    >
+                      <template #title> {{ fieldState(field)?.title || field.title }} </template>
+                      <span>
                         {{ fieldState(field)?.title || field.title }}
                       </span>
-                    </a-tooltip>
+                    </NcTooltip>
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="flex items-center">
@@ -972,16 +973,17 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(displayColumn, activeField),
                       }"
                     />
-                    <a-tooltip :title="fieldState(displayColumn)?.title || displayColumn.title">
-                      <span
-                        class="truncate flex-1"
-                        :class="{
-                          'text-brand-500': compareCols(displayColumn, activeField),
-                        }"
-                      >
+                    <NcTooltip
+                      class="truncate flex-1"
+                      :class="{
+                        'text-brand-500': compareCols(displayColumn, activeField),
+                      }"
+                    >
+                      <template #title> {{ fieldState(displayColumn)?.title || displayColumn.title }} </template>
+                      <span>
                         {{ fieldState(displayColumn)?.title || displayColumn.title }}
                       </span>
-                    </a-tooltip>
+                    </NcTooltip>
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="flex items-center">
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 6dc9a9f6eb..aac782f56c 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -90,20 +90,22 @@ const onClick = (e: Event) => {
         'self-start': isForm || isSurveyForm,
       }"
     />
-    <a-tooltip placement="bottom" :title="column.title">
-      <div
-        v-if="column"
-        class="name pl-1"
-        :class="{
-          'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu && !isExpandedForm,
-          'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
-          '!truncate': !isForm,
-        }"
-        :data-test-id="column.title"
-      >
+    <NcTooltip
+      v-if="column"
+      class="name pl-1"
+      :class="{
+        'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu && !isExpandedForm,
+        'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
+        '!truncate': !isForm,
+      }"
+      placement="bottom"
+    >
+      <template #title> {{ column.title }} </template>
+
+      <span :data-test-id="column.title">
         {{ column.title }}
-      </div>
-    </a-tooltip>
+      </span>
+    </NcTooltip>
 
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index 3722aac3c5..1dbe0a3752 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -92,6 +92,7 @@ const tooltipMsg = computed(() => {
   if (!column.value) {
     return ''
   }
+
   if (isHm(column.value)) {
     return `'${tableTile.value}' ${t('labels.hasMany')} '${relatedTableTitle.value}'`
   } else if (isMm(column.value)) {
@@ -110,7 +111,7 @@ const tooltipMsg = computed(() => {
   } else if (isRollup(column.value)) {
     return `'${childColumn.value.title}' of '${relatedTableTitle.value}' (${childColumn.value.uidt})`
   }
-  return ''
+  return column?.value?.title || ''
 })
 
 const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
@@ -153,14 +154,14 @@ const openDropDown = (e: Event) => {
   >
     <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
 
-    <a-tooltip placement="bottom" :title="column.title">
+    <NcTooltip placement="bottom" :class="{ truncate: !isForm }" class="name pl-1">
       <template v-if="!isForm && !isExpandedForm" #title>
         {{ tooltipMsg }}
       </template>
-      <span class="name pl-1" :class="{ truncate: !isForm }" :data-test-id="column.title">
+      <span :data-test-id="column.title">
         {{ column.title }}
       </span>
-    </a-tooltip>
+    </NcTooltip>
 
     <span v-if="isVirtualColRequired(column, meta?.columns || []) || required" class="text-red-500">&nbsp;*</span>
 
@@ -205,4 +206,4 @@ const openDropDown = (e: Event) => {
   max-width: calc(100% - 40px);
   word-break: break-all;
 }
-</style>
\ No newline at end of file
+</style>