diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 6819a82b1f..c21832cfd4 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -429,7 +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 }"
-            :showOnTruncateOnly="true"
+            show-on-truncate-only
           >
             <template #title>{{ base.title }}</template>
             <span @click="onProjectClick(base)">
diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 0150818209..3a120bdc2b 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -233,7 +233,7 @@ const isTableOpened = computed(() => {
       </div>
       <NcTooltip
         class="nc-tbl-title nc-sidebar-node-title text-ellipsis w-full overflow-hidden select-none"
-        :showOnTruncateOnly="true"
+        show-on-truncate-only
       >
         <template #title>{{ table.title }}</template>
         <span
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 426a98d5e0..32e41848b0 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/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" :showOnTruncateOnly="true">
+      <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"
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index 2cfdd10860..b7c85dcba7 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/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" :showOnTruncateOnly="true">
+      <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" :showOnTruncateOnly="true">
+                <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" :showOnTruncateOnly="true">
+                <NcTooltip class="overflow-ellipsis min-w-0 shrink-1 truncate" show-on-truncate-only>
                   <template #title>{{ record.title }}</template>
                   <span>{{ record.title }}</span>
                 </NcTooltip>
diff --git a/packages/nc-gui/components/nc/Tooltip.vue b/packages/nc-gui/components/nc/Tooltip.vue
index 8d0595f8c3..e4f920893e 100644
--- a/packages/nc-gui/components/nc/Tooltip.vue
+++ b/packages/nc-gui/components/nc/Tooltip.vue
@@ -21,7 +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 showOnTruncateOnly = computed(() => props.showOnTruncateOnly)
 const hideOnClick = computed(() => props.hideOnClick)
 const placement = computed(() => props.placement ?? 'top')
 
@@ -69,7 +69,7 @@ onKeyStroke(
 watch([isHovering, () => modifierKey.value, () => disabled.value], ([hovering, key, isDisabled]) => {
   if (showOnTruncateOnly?.value) {
     const targetElement = el?.value
-    const isElementTruncated = targetElement?.scrollWidth > targetElement?.clientWidth
+    const isElementTruncated = targetElement && targetElement.scrollWidth > targetElement.clientWidth
     if (!isElementTruncated) {
       showTooltip.value = false
       return
diff --git a/packages/nc-gui/components/project/View.vue b/packages/nc-gui/components/project/View.vue
index c7e92e3831..3411279487 100644
--- a/packages/nc-gui/components/project/View.vue
+++ b/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" :showOnTruncateOnly="true">
+          <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 }}
diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index 0d05a30559..cf18a7d5f7 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/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" :showOnTruncateOnly="true">
+              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
                 <template #title>{{ table.title }}</template>
                 <span>{{ table.title }}</span>
               </NcTooltip>
diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 524d986ff1..4f6557b6fc 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -819,7 +819,7 @@ const onFieldOptionUpdate = () => {
                         'text-brand-500': compareCols(field, activeField),
                       }"
                       class="truncate flex-1"
-                      :showOnTruncateOnly="true"
+                      show-on-truncate-only
                     >
                       <template #title> {{ fieldState(field)?.title || field.title }} </template>
                       <span>
@@ -979,7 +979,7 @@ const onFieldOptionUpdate = () => {
                       :class="{
                         'text-brand-500': compareCols(displayColumn, activeField),
                       }"
-                      :showOnTruncateOnly="true"
+                      show-on-truncate-only
                     >
                       <template #title> {{ fieldState(displayColumn)?.title || displayColumn.title }} </template>
                       <span>
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 7b3887fab9..8cced36a08 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -99,7 +99,7 @@ const onClick = (e: Event) => {
       }"
       class="name pl-1"
       placement="bottom"
-      :showOnTruncateOnly="true"
+      show-on-truncate-only
     >
       <template #title> {{ column.title }} </template>
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index 8f40e1017b..a2aec34ee9 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/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" :showOnTruncateOnly="true">
+    <NcTooltip placement="bottom" class="truncate name pl-1" show-on-truncate-only>
       <template #title>
         {{ tooltipMsg }}
       </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
index 1db4387ec8..46564e904a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue
@@ -104,7 +104,7 @@ const onArrowUp = () => {
         @click="onClick(option)"
       >
         <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate" :showOnTruncateOnly="true">
+        <NcTooltip class="truncate" show-on-truncate-only>
           <template #title> {{ option.title }}</template>
           <template #default>
             {{ option.title }}
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index 9112e89da2..9cf5dc9382 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -85,7 +85,7 @@ if (!localValue.value && allowEmpty !== true) {
         <NcTooltip
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
           class="max-w-[15rem] truncate select-none"
-          :showOnTruncateOnly="true"
+          show-on-truncate-only
         >
           <template #title> {{ option.label }}</template>
           <template #default>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 01b318bd0b..2754c988c7 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -380,7 +380,7 @@ useMenuCloseOnEsc(open)
                     "
                   >
                     <component :is="getIcon(metaColumnById[field.fk_column_id])" />
-                    <NcTooltip :showOnTruncateOnly="true" class="flex-1 px-1 truncate">
+                    <NcTooltip show-on-truncate-only class="flex-1 px-1 truncate">
                       <template #title>
                         {{ field.title }}
                       </template>
@@ -406,7 +406,7 @@ useMenuCloseOnEsc(open)
                   @click.stop
                 >
                   <component :is="getIcon(metaColumnById[filteredFieldList[0].fk_column_id as string])" />
-                  <NcTooltip :showOnTruncateOnly="true" class="px-1 flex-1 truncate">
+                  <NcTooltip show-on-truncate-only class="px-1 flex-1 truncate">
                     <template #title>{{ filteredFieldList[0].title }}</template>
                     <template #default>{{ filteredFieldList[0].title }}</template>
                   </NcTooltip>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue b/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
index 8a08f48e84..1948d68877 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue
+++ b/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" :showOnTruncateOnly="true">
+      <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="{
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 5665c67f47..2e19259d80 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -114,7 +114,7 @@ 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" :showOnTruncateOnly="true">
+            <NcTooltip class="truncate" placement="top" show-on-truncate-only>
               <template #title>{{ op.label }}</template>
               <template #default>{{ op.label }}</template>
             </NcTooltip>