fix : added tooltip for sidebar and topbar items

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

@@ -149,7 +149,7 @@ const isTableOpened = computed(() => {
     :class="[`nc-base-tree-tbl nc-base-tree-tbl-${table.title}`]"
     :data-active="openedTableId === table.id"
   >
-    <GeneralTooltip
+    <NcTooltip
       class="nc-tree-item-inner nc-sidebar-node pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
       :class="{
         'hover:bg-gray-200': openedTableId !== table.id,
@@ -313,7 +313,7 @@ const isTableOpened = computed(() => {
         :table-id="table.id"
         :base-id="base.id"
       />
-    </GeneralTooltip>
+    </NcTooltip>
     <DashboardTreeViewViewsList v-if="isExpanded" :table-id="table.id" :base-id="base.id" />
   </div>
 </template>

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

@@ -232,19 +232,18 @@ watch(isDropdownOpen, async () => {
         @blur="onRename"
         @keydown.stop="onKeyDown($event)"
       />
-
-      <div
-        v-else
-        class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full"
-        data-testid="sidebar-view-title"
-        :class="{
-          'font-medium': activeView?.id === vModel.id,
-        }"
-        :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
-      >
-        {{ vModel.alias || vModel.title }}
-      </div>
-
+      <NcTooltip v-else class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none w-full">
+        <template #title> {{ vModel.alias || vModel.title }}</template>
+        <div
+          data-testid="sidebar-view-title"
+          :class="{
+            'font-medium': activeView?.id === vModel.id,
+          }"
+          :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+        >
+          {{ vModel.alias || vModel.title }}
+        </div>
+      </NcTooltip>
       <div class="flex-1" />
 
       <template v-if="!isEditing && !isLocked && isUIAllowed('viewCreateOrEdit')">

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

@@ -173,7 +173,7 @@ function openDeleteDialog() {
   >
     <div
       v-e="['c:breadcrumb:view-actions']"
-      class="truncate nc-active-view-title !hover:(bg-gray-100 text-gray-800) ml-0.25 pl-1 pr-0.25 rounded-md py-1 cursor-pointer"
+      class="truncate nc-active-view-title flex gap-0.5 items-center !hover:(bg-gray-100 text-gray-800) ml-1 pl-1 pr-0.25 rounded-md py-1 cursor-pointer"
       :class="{
         'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default,
         'max-w-3/5': !isSharedBase && !isMobileMode && !activeView?.is_default,
@@ -182,14 +182,16 @@ function openDeleteDialog() {
         'text-gray-800 font-medium': !activeView?.is_default,
       }"
     >
-      <span
-        class="truncate xs:pl-1.25 text-inherit"
-        :class="{
-          'max-w-28/100': !isMobileMode,
-        }"
-      >
-        {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
-      </span>
+      <NcTooltip class="truncate xs:pl-1.25 flex-1 text-inherit">
+        <template #title>{{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }} </template>
+        <span
+          :class="{
+            'max-w-28/100': !isMobileMode,
+          }"
+        >
+          {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
+        </span>
+      </NcTooltip>
       <GeneralIcon icon="arrowDown" class="ml-1" />
     </div>
     <template #overlay>