From 8c8ad02a6f88721da712beff58e5af58915e6844 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Mon, 20 Apr 2026 15:12:51 +0800
Subject: [PATCH] chore: migrate workflow node title tooltip (#35418)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 eslint-suppressions.json                 |  3 --
 web/app/components/workflow/run/node.tsx | 55 ++++++++++++++++++------
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index e16a1be0f7..798ae1ec28 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -6068,9 +6068,6 @@
     }
   },
   "web/app/components/workflow/run/node.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 6f8897e788..b683467d5f 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -8,6 +8,7 @@ import type {
   NodeTracing,
 } from '@/types/workflow'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import {
   RiAlertFill,
   RiArrowRightSLine,
@@ -16,9 +17,8 @@ import {
   RiLoader2Line,
   RiPauseCircleFill,
 } from '@remixicon/react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@/app/components/base/tooltip'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
@@ -68,6 +68,8 @@ const NodePanel: FC<Props> = ({
       return
     doSetCollapseState(state)
   }, [hideProcessDetail])
+  const titleRef = useRef<HTMLDivElement>(null)
+  const [isTitleTruncated, setIsTitleTruncated] = useState(false)
   const { t } = useTranslation()
   const docLink = useDocLink()
 
@@ -92,6 +94,27 @@ const NodePanel: FC<Props> = ({
     setCollapseState(!nodeInfo.expand)
   }, [nodeInfo.expand, setCollapseState])
 
+  useEffect(() => {
+    const titleElement = titleRef.current
+    if (!titleElement)
+      return
+
+    let frameId = 0
+    const updateIsTitleTruncated = () => {
+      setIsTitleTruncated(titleElement.scrollWidth > titleElement.clientWidth)
+    }
+
+    frameId = requestAnimationFrame(updateIsTitleTruncated)
+
+    const resizeObserver = new ResizeObserver(updateIsTitleTruncated)
+    resizeObserver.observe(titleElement)
+
+    return () => {
+      cancelAnimationFrame(frameId)
+      resizeObserver.disconnect()
+    }
+  }, [nodeInfo.title])
+
   const isIterationNode = nodeInfo.node_type === BlockEnum.Iteration && !!nodeInfo.details?.length
   const isLoopNode = nodeInfo.node_type === BlockEnum.Loop && !!nodeInfo.details?.length
   const isRetryNode = hasRetryNode(nodeInfo.node_type) && !!nodeInfo.retryDetail?.length
@@ -132,18 +155,24 @@ const NodePanel: FC<Props> = ({
             />
           )}
           <BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('mr-2 shrink-0', inMessage && 'mr-1!')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
-          <Tooltip
-            popupContent={
+          <Tooltip>
+            <TooltipTrigger
+              disabled={!isTitleTruncated}
+              render={(
+                <div
+                  ref={titleRef}
+                  className={cn(
+                    'grow truncate system-xs-semibold-uppercase text-text-secondary',
+                    hideInfo && 'text-xs!',
+                  )}
+                >
+                  {nodeInfo.title}
+                </div>
+              )}
+            />
+            <TooltipContent>
               <div className="max-w-xs">{nodeInfo.title}</div>
-            }
-          >
-            <div className={cn(
-              'grow truncate system-xs-semibold-uppercase text-text-secondary',
-              hideInfo && 'text-xs!',
-            )}
-            >
-              {nodeInfo.title}
-            </div>
+            </TooltipContent>
           </Tooltip>
           {!['running', 'paused'].includes(nodeInfo.status) && !hideInfo && (
             <div className="shrink-0 system-xs-regular text-text-tertiary">