From 6709b042b974c65cab4a54632ee84373254f60c8 Mon Sep 17 00:00:00 2001
From: GCHQ-Developer-299
 <111292477+GCHQ-Developer-299@users.noreply.github.com>
Date: Mon, 3 Feb 2025 10:41:17 +0000
Subject: [PATCH 1/2] fix(canary-web-components): support for nested tooltips
 in data-table slotted elements

modify fixCellTooltip to recursively search for nested tooltips

2894
---
 .../ic-data-table/ic-data-table.tsx           | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
index b87795b6aa..cff873172d 100644
--- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
+++ b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
@@ -2099,14 +2099,26 @@ export class DataTable {
   }
 
   private fixCellTooltip = (element: HTMLElement) => {
-    const tooltipEl = (
-      element.tagName === "IC-TOOLTIP"
-        ? element
-        : element.shadowRoot?.querySelector(this.IC_TOOLTIP_STRING)
-    ) as HTMLIcTooltipElement;
+    let tooltip: HTMLIcTooltipElement;
+
+    if (element.tagName === "IC-TOOLTIP") {
+      tooltip = element as HTMLIcTooltipElement;
+    } else if (element.shadowRoot?.querySelector(this.IC_TOOLTIP_STRING)) {
+      tooltip = element.shadowRoot?.querySelector(
+        this.IC_TOOLTIP_STRING
+      ) as HTMLIcTooltipElement;
+    } else {
+      if (element.children?.length > 0) {
+        Array.from(element.children).forEach((el) => {
+          this.fixCellTooltip(el as HTMLElement);
+        });
+      } else {
+        return;
+      }
+    }
 
-    if (tooltipEl) {
-      tooltipEl.setExternalPopperProps({
+    if (tooltip) {
+      tooltip.setExternalPopperProps({
         strategy: "fixed",
       });
     }

From 723f6a67661d085f025a39864609476744f2661f Mon Sep 17 00:00:00 2001
From: GCHQ-Developer-299
 <111292477+GCHQ-Developer-299@users.noreply.github.com>
Date: Mon, 3 Feb 2025 10:43:03 +0000
Subject: [PATCH 2/2] docs(canary-react): modify data table story for tooltips

Modify links and slotted elements story to add tooltips at different nesting levels

2894
---
 .../src/stories/ic-data-table.stories.mdx     | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
index 0a27cfefba..572bf228b9 100644
--- a/packages/canary-react/src/stories/ic-data-table.stories.mdx
+++ b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -1088,16 +1088,17 @@ const DataTable = () => {
 export default DataTable;
 ```
 
-### Links and elements in data
+### Links and slotted elements in data
 
 Custom HTML elements can be slotted or passed via the `data` prop to display in certain cells. When using the slotted method, the slot name follows the format of `{COLUMN_TAG}-{ROW_INDEX}`.
 
 <Canvas withSource="none">
-  <Story name="Links and Elements in data">
+  <Story name="Links and slotted elements in data">
     <IcDataTable
-      caption="Links and Elements in data"
+      caption="Links and slotted elements in data"
       columns={COLS_ELEMENTS}
       data={DATA_REACT_ELEMENTS}
+      showPagination
     >
       {DATA_REACT_ELEMENTS.map((_, index) => (
         <>
@@ -1105,26 +1106,27 @@ Custom HTML elements can be slotted or passed via the `data` prop to display in
             key={`actions-${index}`}
             variant="destructive"
             slot={`actions-${index}`}
+            title="Delete row (top level tooltip)"
             onClick={() => console.log("Delete")}
           >
             Delete
           </IcButton>
+          <div key={`actions2-${index}`} slot={`actions2-${index}`}>
           <IcButton
-            key={`actions2-${index}`}
             variant="icon"
-            slot={`actions2-${index}`}
-            aria-label="Delete row"
+            aria-label="Delete row (nested tooltip)"
             onClick={() => console.log("Delete")}
           >
             <SlottedSVG path={mdiDelete} viewBox="0 0 24 24" />
           </IcButton>
+          </div>
         </>
       ))}
     </IcDataTable>
   </Story>
 </Canvas>
 
-#### Links and elements in data code example
+#### Links and slotted elements in data code example
 
 ```tsx
 import * as React from "react";
@@ -1164,11 +1166,33 @@ const data = [
 
 const DataTable = () => (
   <IcDataTable
-    caption="Links and Elements in data"
+    caption="Links and slotted elements in data"
     columns={columns}
     data={data}
+    showPagination="true"
   >
-    {data.map((_, index) => <IcButton key={index} slot={`actions-${index}`} variant="destructive" onClick={() => console.log("Delete")}>Delete</IcButton>)}
+    {data.map((_, index) => (
+        <>
+          <IcButton
+            key={`actions-${index}`}
+            variant="destructive"
+            slot={`actions-${index}`}
+            title="Delete row (top level tooltip)"
+            onClick={() => console.log("Delete")}
+          >
+            Delete
+          </IcButton>
+          <div key={`actions2-${index}`} slot={`actions2-${index}`}>
+          <IcButton
+            variant="icon"
+            aria-label="Delete row (nested tooltip)"
+            onClick={() => console.log("Delete")}
+          >
+            <SlottedSVG path={mdiDelete} viewBox="0 0 24 24" />
+          </IcButton>
+          </div>
+        </>
+      ))}
   </IcDataTable>
 );