From 48f610a65648cc26db9f19129ac0f4e6e32c6906 Mon Sep 17 00:00:00 2001
From: hoshinotsuyoshi <tsuyoshi.hoshino@route06.co.jp>
Date: Fri, 13 Dec 2024 12:07:24 +0900
Subject: [PATCH 1/2] feat(ERDRenderer): Add tooltip functionality to
 TableHeader component

---
 frontend/.changeset/new-deers-smash.md        |  6 +++++
 .../TableNode/TableHeader/TableHeader.tsx     | 24 +++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 frontend/.changeset/new-deers-smash.md

diff --git a/frontend/.changeset/new-deers-smash.md b/frontend/.changeset/new-deers-smash.md
new file mode 100644
index 00000000..c4abc430
--- /dev/null
+++ b/frontend/.changeset/new-deers-smash.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+Add tooltip functionality to TableHeader component
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx
index 56e50c24..24a84183 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx
+++ b/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 && (

From c5c84590f5c6e122a33308114491b30682ee0c12 Mon Sep 17 00:00:00 2001
From: hoshino tsuyoshi <1394049+hoshinotsuyoshi@users.noreply.github.com>
Date: Fri, 13 Dec 2024 12:29:45 +0900
Subject: [PATCH 2/2] Update frontend/.changeset/new-deers-smash.md

Co-authored-by: Hirotaka Miyagi <31152321+MH4GF@users.noreply.github.com>
---
 frontend/.changeset/new-deers-smash.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/.changeset/new-deers-smash.md b/frontend/.changeset/new-deers-smash.md
index c4abc430..3a93a9b7 100644
--- a/frontend/.changeset/new-deers-smash.md
+++ b/frontend/.changeset/new-deers-smash.md
@@ -3,4 +3,4 @@
 "@liam-hq/cli": patch
 ---
 
-Add tooltip functionality to TableHeader component
+Add tooltips to display the full table name when it is truncated in the Table node