fix : Used NcTooltip

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">

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>
 

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>
+</style>