Merge pull request #237 from liam-hq/hovering-on-table-name-tooltip

feat(ERDRenderer): Add tooltip functionality to TableHeader component

frontend/.changeset/new-deers-smash.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+Add tooltips to display the full table name when it is truncated in the Table node

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx

@@ -1,5 +1,12 @@
 import { useDBStructureStore, useUserEditingStore } from '@/stores'
-import { Table2 } from '@liam-hq/ui'
+import {
+  Table2,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from '@liam-hq/ui'
 import { Handle, Position } from '@xyflow/react'
 import type { FC } from 'react'
 import styles from './TableHeader.module.css'
@@ -22,7 +29,20 @@ export const TableHeader: FC<Props> = ({ name }) => {
   return (
     <div className={styles.wrapper}>
       <Table2 width={16} />
-      <span className={styles.name}>{name}</span>
+
+      <TooltipProvider>
+        <TooltipRoot>
+          <TooltipTrigger asChild>
+            <span className={styles.name}>{name}</span>
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side={'top'} sideOffset={4}>
+              {name}
+            </TooltipContent>
+          </TooltipPortal>
+        </TooltipRoot>
+      </TooltipProvider>
+
       {showMode === 'TABLE_NAME' && (
         <>
           {isTarget && (