feat/Added general tooltip to allow alt + hover to trigger tooltip

packages/nc-gui/components.d.ts

@@ -224,6 +224,7 @@ declare module '@vue/runtime-core' {
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
+    MiCircleWarning: typeof import('~icons/mi/circle-warning')['default']
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

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

@@ -311,12 +311,12 @@ function openTableCreateDialog() {
                   { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
                   `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                 ]"
-                class="nc-tree-item pl-5 pr-3 py-2 text-sm cursor-pointer group"
+                class="nc-tree-item text-sm cursor-pointer group"
                 :data-order="table.order"
                 :data-id="table.id"
                 @click="addTableTab(table)"
               >
-                <a-tooltip>
+                <GeneralTooltip wrapper-class="pl-5 pr-3 py-2" modifier-key="Alt">
                   <template #title>{{ table.table_name }}</template>
                   <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                     <div class="flex w-auto">
@@ -362,7 +362,7 @@ function openTableCreateDialog() {
                       </template>
                     </a-dropdown>
                   </div>
-                </a-tooltip>
+                </GeneralTooltip>
               </div>
             </div>
           </div>

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

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { onKeyStroke } from '@vueuse/core'
+
+interface Props {
+  // Key to be pressed on hover to trigger the tooltip
+  modifierKey?: string
+  wrapperClass?: string
+}
+
+const { modifierKey } = defineProps<Props>()
+
+const showTooltip = ref(false)
+const isMouseOver = ref(false)
+
+if (modifierKey) {
+  onKeyStroke(modifierKey, (e) => {
+    e.preventDefault()
+    if (modifierKey && isMouseOver.value) {
+      showTooltip.value = true
+    }
+  })
+}
+
+watch(isMouseOver, (val) => {
+  if (!val) {
+    showTooltip.value = false
+  }
+
+  // Show tooltip on mouseover if no modifier key is provided
+  if (val && !modifierKey) {
+    showTooltip.value = true
+  }
+})
+</script>
+
+<template>
+  <a-tooltip v-model:visible="showTooltip" :trigger="[]">
+    <template #title>
+      <slot name="title" />
+    </template>
+    <div class="w-full" :class="wrapperClass" @mouseenter="isMouseOver = true" @mouseleave="isMouseOver = false">
+      <slot />
+    </div>
+  </a-tooltip>
+</template>