Merge pull request #7163 from nocodb/fix/tooltip-showOnTruncate

fix : added showOnTruncateOnly prop in tooltip component

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -429,6 +429,7 @@ const projectDelete = () => {
             class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
             :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
             :class="{ 'text-black font-semibold': activeProjectId === base.id && baseViewOpen }"
+            show-on-truncate-only
           >
             <template #title>{{ base.title }}</template>
             <span @click="onProjectClick(base)">

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -231,7 +231,10 @@ const isTableOpened = computed(() => {
           </div>
         </div>
       </div>
-      <NcTooltip class="nc-tbl-title nc-sidebar-node-title text-ellipsis w-full overflow-hidden select-none">
+      <NcTooltip
+        class="nc-tbl-title nc-sidebar-node-title text-ellipsis w-full overflow-hidden select-none"
+        show-on-truncate-only
+      >
         <template #title>{{ table.title }}</template>
         <span
           :class="{

packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@@ -232,7 +232,7 @@ watch(isDropdownOpen, async () => {
         @blur="onRename"
         @keydown.stop="onKeyDown($event)"
       />
-      <NcTooltip v-else class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full">
+      <NcTooltip v-else class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full" show-on-truncate-only>
         <template #title> {{ vModel.alias || vModel.title }}</template>
         <div
           data-testid="sidebar-view-title"

packages/nc-gui/components/dashboard/settings/UIAcl.vue

@@ -147,7 +147,7 @@ const toggleSelectAll = (role: Role) => {
 <template>
   <div class="flex flex-row w-full items-center justify-center">
     <div class="flex flex-col w-[900px]">
-      <NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate">
+      <NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate" show-on-truncate-only>
         <template #title>{{ base.title }}</template>
         <span> UI ACL : {{ base.title }} </span>
       </NcTooltip>
@@ -211,7 +211,7 @@ const toggleSelectAll = (role: Role) => {
                 <div class="min-w-5 flex items-center justify-center">
                   <GeneralTableIcon :meta="{ meta: record.table_meta, type: record.ptype }" class="text-gray-500" />
                 </div>
-                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate">
+                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate" show-on-truncate-only>
                   <template #title>{{ record._ptn }}</template>
                   <span>{{ record._ptn }}</span>
                 </NcTooltip>
@@ -223,7 +223,7 @@ const toggleSelectAll = (role: Role) => {
                 <div class="min-w-5 flex items-center justify-center">
                   <GeneralViewIcon :meta="record" class="text-gray-500"></GeneralViewIcon>
                 </div>
-                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate">
+                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate" show-on-truncate-only>
                   <template #title>{{ record.title }}</template>
                   <span>{{ record.title }}</span>
                 </NcTooltip>

packages/nc-gui/components/nc/Tooltip.vue

@@ -11,6 +11,7 @@ interface Props {
   // force disable tooltip
   disabled?: boolean
   placement?: TooltipPlacement | undefined
+  showOnTruncateOnly?: boolean
   hideOnClick?: boolean
   overlayClassName?: string
 }
@@ -20,6 +21,7 @@ const props = defineProps<Props>()
 const modifierKey = computed(() => props.modifierKey)
 const tooltipStyle = computed(() => props.tooltipStyle)
 const disabled = computed(() => props.disabled)
+const showOnTruncateOnly = computed(() => props.showOnTruncateOnly)
 const hideOnClick = computed(() => props.hideOnClick)
 const placement = computed(() => props.placement ?? 'top')
 
@@ -65,6 +67,15 @@ onKeyStroke(
 )
 
 watch([isHovering, () => modifierKey.value, () => disabled.value], ([hovering, key, isDisabled]) => {
+  if (showOnTruncateOnly?.value) {
+    const targetElement = el?.value
+    const isElementTruncated = targetElement && targetElement.scrollWidth > targetElement.clientWidth
+    if (!isElementTruncated) {
+      showTooltip.value = false
+      return
+    }
+  }
+
   if (!hovering || isDisabled) {
     showTooltip.value = false
     return

packages/nc-gui/components/project/View.vue

@@ -75,7 +75,7 @@ watch(
         <GeneralOpenLeftSidebarBtn />
         <div class="flex flex-row items-center h-full gap-x-2.5">
           <GeneralProjectIcon :type="openedProject?.type" />
-          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150">
+          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150" show-on-truncate-only>
             <template #title> {{ openedProject?.title }}</template>
             <span class="truncate">
               {{ openedProject?.title }}

packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@@ -82,7 +82,7 @@ const isLinks = computed(() => vModel.value.uidt === UITypes.Links)
               <div class="min-w-5 flex items-center justify-center">
                 <GeneralTableIcon :meta="table" class="text-gray-500" />
               </div>
-              <NcTooltip class="flex-1 truncate">
+              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
                 <template #title>{{ table.title }}</template>
                 <span>{{ table.title }}</span>
               </NcTooltip>

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -819,6 +819,7 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(field, activeField),
                       }"
                       class="truncate flex-1"
+                      show-on-truncate-only
                     >
                       <template #title> {{ fieldState(field)?.title || field.title }} </template>
                       <span>
@@ -978,6 +979,7 @@ const onFieldOptionUpdate = () => {
                       :class="{
                         'text-brand-500': compareCols(displayColumn, activeField),
                       }"
+                      show-on-truncate-only
                     >
                       <template #title> {{ fieldState(displayColumn)?.title || displayColumn.title }} </template>
                       <span>

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

@@ -99,12 +99,13 @@ const onClick = (e: Event) => {
       }"
       class="name pl-1"
       placement="bottom"
+      show-on-truncate-only
     >
       <template #title> {{ column.title }} </template>
 
-      <div :class="{ truncate: !isForm }" :data-test-id="column.title">
+      <span :data-test-id="column.title">
         {{ column.title }}
-      </div>
+      </span>
     </NcTooltip>
 
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>

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

@@ -154,7 +154,7 @@ const openDropDown = (e: Event) => {
   >
     <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
 
-    <NcTooltip placement="bottom" class="truncate name pl-1">
+    <NcTooltip placement="bottom" class="truncate name pl-1" show-on-truncate-only>
       <template #title>
         {{ tooltipMsg }}
       </template>

packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue

@@ -104,11 +104,11 @@ const onArrowUp = () => {
         @click="onClick(option)"
       >
         <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate">
+        <NcTooltip class="truncate" show-on-truncate-only>
           <template #title> {{ option.title }}</template>
-          <span>
+          <template #default>
             {{ option.title }}
-          </span>
+          </template>
         </NcTooltip>
       </div>
     </div>

packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue

@@ -85,11 +85,12 @@ if (!localValue.value && allowEmpty !== true) {
         <NcTooltip
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
           class="max-w-[15rem] truncate select-none"
+          show-on-truncate-only
         >
           <template #title> {{ option.label }}</template>
-          <span>
+          <template #default>
             {{ option.label }}
-          </span>
+          </template>
         </NcTooltip>
       </div>
     </a-select-option>

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -380,11 +380,11 @@ useMenuCloseOnEsc(open)
                     "
                   >
                     <component :is="getIcon(metaColumnById[field.fk_column_id])" />
-                    <NcTooltip :disabled="field.title.length < 30" class="flex-1 px-1 truncate">
+                    <NcTooltip show-on-truncate-only class="flex-1 px-1 truncate">
                       <template #title>
                         {{ field.title }}
                       </template>
-                      <span>{{ field.title }}</span>
+                      <template #default>{{ field.title }}</template>
                     </NcTooltip>
 
                     <NcSwitch v-e="['a:fields:show-hide']" :checked="field.show" :disabled="field.isViewEssentialField" />
@@ -406,9 +406,9 @@ useMenuCloseOnEsc(open)
                   @click.stop
                 >
                   <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
-                  <NcTooltip :disabled="filteredFieldList?.[0]?.title?.length < 30" class="px-1 flex-1 truncate">
+                  <NcTooltip show-on-truncate-only class="px-1 flex-1 truncate">
                     <template #title>{{ filteredFieldList[0].title }}</template>
-                    <span>{{ filteredFieldList[0].title }}</span>
+                    <template #default>{{ filteredFieldList[0].title }}</template>
                   </NcTooltip>
 
                   <NcSwitch v-e="['a:fields:show-hide']" :checked="true" :disabled="true" />

packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue

@@ -182,7 +182,7 @@ function openDeleteDialog() {
         'text-gray-800 font-medium': !activeView?.is_default,
       }"
     >
-      <NcTooltip class="truncate xs:pl-1.25 flex-1 text-inherit">
+      <NcTooltip class="truncate xs:pl-1.25 flex-1 text-inherit" show-on-truncate-only>
         <template #title>{{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }} </template>
         <span
           :class="{

packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@@ -114,9 +114,9 @@ watch(columns, () => {
         <a-select-option v-for="op of columns" :key="op.value" v-e="['c:search:field:select']" :value="op.value">
           <div class="text-[0.75rem] flex items-center -ml-1 gap-2">
             <SmartsheetHeaderIcon class="text-sm" :column="op.column" />
-            <NcTooltip class="truncate" placement="top">
+            <NcTooltip class="truncate" placement="top" show-on-truncate-only>
               <template #title>{{ op.label }}</template>
-              <span>{{ op.label }}</span>
+              <template #default>{{ op.label }}</template>
             </NcTooltip>
           </div>
         </a-select-option>

tests/playwright/pages/Dashboard/Grid/index.ts

@@ -129,7 +129,7 @@ export class GridPage extends BasePage {
     await this._fillRow({ index, columnHeader, value: rowValue });
 
     const clickOnColumnHeaderToSave = () =>
-      this.get().locator(`[data-title="${columnHeader}"]`).locator(`div[data-test-id="${columnHeader}"]`).click();
+      this.get().locator(`[data-title="${columnHeader}"]`).locator(`span[data-test-id="${columnHeader}"]`).click();
 
     if (networkValidation) {
       await this.waitForResponse({
@@ -164,7 +164,7 @@ export class GridPage extends BasePage {
     await this._fillRow({ index, columnHeader, value });
 
     const clickOnColumnHeaderToSave = () =>
-      this.get().locator(`[data-title="${columnHeader}"]`).locator(`div[data-test-id="${columnHeader}"]`).click();
+      this.get().locator(`[data-title="${columnHeader}"]`).locator(`span[data-test-id="${columnHeader}"]`).click();
 
     if (networkValidation) {
       await this.waitForResponse({