fix: show tooltip on hover over icon on grid header #2117

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -1,6 +1,17 @@
 <script setup lang="ts">
-import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
+import { UITypesName, type ColumnReqType, type ColumnType, UITypes } from 'nocodb-sdk'
-import { ColumnInj, IsExpandedFormOpenInj, IsFormInj, IsKanbanInj, inject, provide, ref, toRef, useRoles } from '#imports'
+import {
+  ColumnInj,
+  IsExpandedFormOpenInj,
+  IsFormInj,
+  IsKanbanInj,
+  inject,
+  provide,
+  ref,
+  toRef,
+  useRoles,
+  parseProp,
+} from '#imports'
 
 interface Props {
   column: ColumnType
@@ -15,6 +26,8 @@ const { isMobileMode } = useGlobal()
 
 const hideMenu = toRef(props, 'hideMenu')
 
+const isGrid = inject(IsGridInj, ref(false))
+
 const isForm = inject(IsFormInj, ref(false))
 
 const isLocked = inject(IsLockedInj, ref(false))
@@ -37,6 +50,13 @@ const editColumnDropdown = ref(false)
 
 const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
 
+const columnTypeName = computed(() => {
+  if (column.value.uidt === UITypes.LongText && parseProp(column?.value?.meta)?.richMode) {
+    return UITypesName.RichText
+  }
+  return column.value.uidt ? UITypesName[column.value.uidt] : ''
+})
+
 const addField = async (payload: any) => {
   columnOrder.value = payload
   editColumnDropdown.value = true
@@ -84,12 +104,22 @@ const onClick = (e: Event) => {
     @click.right="openDropDown"
     @click="onClick"
   >
-    <SmartsheetHeaderCellIcon
+    <template v-if="column && !props.hideIcon">
-      v-if="column && !props.hideIcon"
+      <NcTooltip v-if="isGrid && !isExpandedForm" class="flex items-center" placement="bottom">
-      :class="{
+        <template #title> {{ columnTypeName }} </template>
-        'self-start': isForm || isSurveyForm,
+        <SmartsheetHeaderCellIcon
-      }"
+          :class="{
-    />
+            'self-start': isForm || isSurveyForm,
+          }"
+        />
+      </NcTooltip>
+      <SmartsheetHeaderCellIcon
+        v-else
+        :class="{
+          'self-start': isForm || isSurveyForm,
+        }"
+      />
+    </template>
     <NcTooltip
       v-if="column"
       :class="{

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnReqType, ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
-import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
+import { UITypes, UITypesName, substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
 import {
   ColumnInj,
   IsFormInj,
@@ -46,6 +46,8 @@ const { isUIAllowed } = useRoles()
 
 const meta = inject(MetaInj, ref())
 
+const isGrid = inject(IsGridInj, ref(false))
+
 const isForm = inject(IsFormInj, ref(false))
 
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
@@ -116,6 +118,13 @@ const tooltipMsg = computed(() => {
 
 const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
 
+const columnTypeName = computed(() => {
+  if (column.value.uidt === UITypes.LongText && parseProp(column?.value?.meta)?.richMode) {
+    return UITypesName.RichText
+  }
+  return column.value.uidt ? UITypesName[column.value.uidt] : ''
+})
+
 const addField = async (payload: any) => {
   columnOrder.value = payload
   editColumnDropdown.value = true
@@ -152,8 +161,13 @@ const openDropDown = (e: Event) => {
     @dblclick="openHeaderMenu"
     @click.right="openDropDown"
   >
-    <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
+    <template v-if="column && !props.hideIcon">
-
+      <NcTooltip v-if="isGrid && !isExpandedForm" class="flex items-center" placement="bottom">
+        <template #title> {{ columnTypeName }} </template>
+        <LazySmartsheetHeaderVirtualCellIcon />
+      </NcTooltip>
+      <LazySmartsheetHeaderVirtualCellIcon v-else />
+    </template>
     <NcTooltip placement="bottom" class="truncate name pl-1" show-on-truncate-only>
       <template #title>
         {{ tooltipMsg }}

packages/nocodb-sdk/src/lib/UITypes.ts

@@ -44,6 +44,51 @@ enum UITypes {
   LastModifiedBy = 'LastModifiedBy',
 }
 
+export const UITypesName = {
+  [UITypes.ID]: 'ID',
+  [UITypes.LinkToAnotherRecord]: 'Link to another record',
+  [UITypes.ForeignKey]: 'Foreign key',
+  [UITypes.Lookup]: 'Lookup',
+  [UITypes.SingleLineText]: 'Single line text',
+  [UITypes.LongText]: 'Long text',
+  RichText: 'Rich text',
+  [UITypes.Attachment]: 'Attachment',
+  [UITypes.Checkbox]: 'Checkbox',
+  [UITypes.MultiSelect]: 'Multi select',
+  [UITypes.SingleSelect]: 'Single select',
+  [UITypes.Collaborator]: 'Collaborator',
+  [UITypes.Date]: 'Date',
+  [UITypes.Year]: 'Year',
+  [UITypes.Time]: 'Time',
+  [UITypes.PhoneNumber]: 'Phone number',
+  [UITypes.GeoData]: 'Geo data',
+  [UITypes.Email]: 'Email',
+  [UITypes.URL]: 'URL',
+  [UITypes.Number]: 'Number',
+  [UITypes.Decimal]: 'Decimal',
+  [UITypes.Currency]: 'Currency',
+  [UITypes.Percent]: 'Percent',
+  [UITypes.Duration]: 'Duration',
+  [UITypes.Rating]: 'Rating',
+  [UITypes.Formula]: 'Formula',
+  [UITypes.Rollup]: 'Rollup',
+  [UITypes.Count]: 'Count',
+  [UITypes.DateTime]: 'Date time',
+  [UITypes.CreatedTime]: 'Created time',
+  [UITypes.LastModifiedTime]: 'Last modified time',
+  [UITypes.AutoNumber]: 'Auto number',
+  [UITypes.Geometry]: 'Geometry',
+  [UITypes.JSON]: 'JSON',
+  [UITypes.SpecificDBType]: 'Specific DB type',
+  [UITypes.Barcode]: 'Barcode',
+  [UITypes.QrCode]: 'Qr code',
+  [UITypes.Button]: 'Button',
+  [UITypes.Links]: 'Links',
+  [UITypes.User]: 'User',
+  [UITypes.CreatedBy]: 'Created by',
+  [UITypes.LastModifiedBy]: 'Last modified by',
+};
+
 export const numericUITypes = [
   UITypes.Duration,
   UITypes.Currency,

packages/nocodb-sdk/src/lib/index.ts

@@ -9,6 +9,7 @@ export * from '~/lib/enums';
 export * from '~/lib/formulaHelpers';
 export {
   default as UITypes,
+  UITypesName,
   numericUITypes,
   isNumericCol,
   isVirtualCol,