Implement tooltip on custom call type

.changeset/custom-tooltip.md

@@ -0,0 +1,5 @@
+---
+"@serverlessworkflow/diagram-editor": minor
+---
+
+Implementation of tooltip

packages/serverless-workflow-diagram-editor/src/components/ui/shadcn.css

@@ -25,6 +25,10 @@
 */
 
 .dec-root {
+  --tooltip-background: hsl(0 0% 100%);
+
+  --tooltip-foreground: hsl(222.2 84% 4.9%);
+
   --sidebar: hsl(0 0% 98%);
 
   --sidebar-foreground: hsl(240 5.3% 26.1%);
@@ -43,6 +47,10 @@
 }
 
 .dec-root.dark {
+  --tooltip-background: hsl(222.2 84% 4.9%);
+
+  --tooltip-foreground: hsl(210 40% 98%);
+
   --sidebar: #2d3748;
 
   --sidebar-foreground: hsl(240 4.8% 95.9%);
@@ -61,6 +69,10 @@
 }
 
 @theme inline {
+  --color-tooltip-background: var(--tooltip-background);
+
+  --color-tooltip-foreground: var(--tooltip-foreground);
+
   --color-sidebar: var(--sidebar);
 
   --color-sidebar-foreground: var(--sidebar-foreground);

packages/serverless-workflow-diagram-editor/src/components/ui/tooltip.tsx

@@ -46,19 +46,23 @@ function TooltipContent({
   children,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  const [container, setContainer] = React.useState<HTMLElement>();
+  React.useEffect(() => {
+    setContainer(document.querySelector(".dec-root") ?? undefined);
+  }, []);
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container}>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "dec:z-50 dec:w-fit dec:origin-(--radix-tooltip-content-transform-origin) dec:animate-in dec:rounded-md dec:bg-foreground dec:px-3 dec:py-1.5 dec:text-xs dec:text-balance dec:text-background dec:fade-in-0 dec:zoom-in-95 dec:data-[side=bottom]:slide-in-from-top-2 dec:data-[side=left]:slide-in-from-right-2 dec:data-[side=right]:slide-in-from-left-2 dec:data-[side=top]:slide-in-from-bottom-2 dec:data-[state=closed]:animate-out dec:data-[state=closed]:fade-out-0 dec:data-[state=closed]:zoom-out-95",
+          "dec:z-50 dec:w-fit dec:origin-(--radix-tooltip-content-transform-origin) dec:animate-in dec:rounded-sm dec:bg-tooltip-foreground dec:px-1 dec:py-1 dec:text-[9px] dec:text-balance dec:text-tooltip-background dec:fade-in-0 dec:zoom-in-95 dec:data-[side=bottom]:slide-in-from-top-2 dec:data-[side=left]:slide-in-from-right-2 dec:data-[side=right]:slide-in-from-left-2 dec:data-[side=top]:slide-in-from-bottom-2 dec:data-[state=closed]:animate-out dec:data-[state=closed]:fade-out-0 dec:data-[state=closed]:zoom-out-95",
           className,
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="dec:z-50 dec:size-2.5 dec:translate-y-[calc(-50%_-_2px)] dec:rotate-45 dec:rounded-[2px] dec:bg-foreground dec:fill-foreground" />
+        <TooltipPrimitive.Arrow className="dec:z-50 dec:size-2.5 dec:translate-y-[calc(-50%_-_2px)] dec:rotate-45 dec:rounded-[2px] dec:bg-tooltip-foreground dec:fill-tooltip-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );

packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx

@@ -28,6 +28,7 @@ import {
   terminalNodeConfigMap,
 } from "./taskNodeConfig";
 import { getCallSubType, getListenSubType, getRunSubType } from "../../core";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { CircleAlert } from "lucide-react";
 
 export const ReactFlowNodeTypes: RF.NodeTypes = {
@@ -94,19 +95,21 @@ function TaskNodeBadge({ badge, testId }: BadgeProps) {
   const isUnknown = !KNOWN_BADGES.has(badge.toLowerCase());
 
   if (isUnknown) {
-    /* TODO: instead of using the browser default to display tool tip like below, replace with tooltip component when we add it */
     return (
-      <span
-        title={badge}
-        aria-label={`${t("aria.badge")} ${badge}`}
-        className="dec-task-node-badge-custom"
-        data-testid={`${testId}-custom`}
-      >
-        {badge}
-      </span>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            className="dec-task-node-badge-custom"
+            data-testid={`${testId}-custom`}
+            aria-label={`${t("aria.badge")} ${badge}`}
+          >
+            {badge}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>{badge}</TooltipContent>
+      </Tooltip>
     );
   }
-
   return (
     <span className="dec-task-node-badge" data-testid={testId}>
       {badge}

packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx

@@ -30,6 +30,7 @@ import {
 import { DEFAULT_NODE_SIZE } from "../../../src/react-flow/diagram/autoLayout";
 import { en } from "../../../src/i18n/locales/en";
 import { renderWithProviders } from "../../test-utils/render-helpers";
+import userEvent from "@testing-library/user-event";
 
 function testNode(
   id: string,
@@ -268,7 +269,31 @@ describe("React Flow custom node types", () => {
       const callBadge = screen.getByTestId("call-node-n1-badge-custom");
       expect(callBadge).toBeInTheDocument();
       expect(callBadge.textContent).toBe("customCall");
-      expect(callBadge).toHaveAttribute("title", "customCall");
+    });
+
+    it("should render the raw value as a custom badge for an unknown subtype and display it in the tooltip", async () => {
+      const user = userEvent.setup();
+
+      const nodesWithUnknownBadges = [
+        testNode("n1", GraphNodeType.Call, 100, "CallNode", {
+          call: "customCall",
+        }),
+      ];
+
+      renderWithProviders(
+        <div>
+          <RF.ReactFlow
+            nodeTypes={ReactFlowNodeTypes}
+            nodes={nodesWithUnknownBadges}
+            edges={allEdges}
+          />
+        </div>,
+      );
+
+      const callBadge = screen.getByTestId("call-node-n1-badge-custom");
+      await user.hover(callBadge);
+      const tooltip = await screen.findByRole("tooltip");
+      expect(tooltip).toHaveTextContent("customCall");
     });
 
     it("should render while/compete badges on container nodes", () => {