From d2971e84bbaac9958a30494c4f7767b2109a87bf Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Mon, 30 Sep 2024 15:23:04 +0800
Subject: [PATCH] fix: node handle tooltip

---
 .../nodes/_base/components/node-handle.tsx    | 76 +++++++++----------
 1 file changed, 36 insertions(+), 40 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 9a662366d4..17dca45ebc 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -24,7 +24,6 @@ import {
 import {
   useStore,
 } from '../../../store'
-import Tooltip from '@/app/components/base/tooltip'
 
 type NodeHandleProps = {
   handleId: string
@@ -154,10 +153,23 @@ export const NodeSourceHandle = memo(({
   }, [notInitialWorkflow, data.type, isChatMode])
 
   return (
-    <Tooltip
-      popupContent={(
+    <Handle
+      id={handleId}
+      type='source'
+      position={Position.Right}
+      className={`
+        group/handle !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]
+        after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-primary-500
+        hover:scale-125 transition-all
+        ${!connected && 'after:opacity-0'}
+        ${handleClassName}
+      `}
+      isConnectable={isConnectable}
+      onClick={handleHandleClick}
+    >
+      <div className='hidden group-hover/handle:block absolute left-1/2 -top-1 -translate-y-full -translate-x-1/2 p-1.5 border-[0.5px] border-components-panel-border bg-components-tooltip-bg rounded-lg shadow-lg'>
         <div className='system-xs-regular text-text-tertiary'>
-          <div>
+          <div className=' whitespace-nowrap'>
             <span className='system-xs-medium text-text-secondary'>{t('workflow.common.parallelTip.click.title')}</span>
             {t('workflow.common.parallelTip.click.desc')}
           </div>
@@ -166,42 +178,26 @@ export const NodeSourceHandle = memo(({
             {t('workflow.common.parallelTip.drag.desc')}
           </div>
         </div>
-      )}
-    >
-      <Handle
-        id={handleId}
-        type='source'
-        position={Position.Right}
-        className={`
-          !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]
-          after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-primary-500
-          hover:scale-125 transition-all
-          ${!connected && 'after:opacity-0'}
-          ${handleClassName}
-        `}
-        isConnectable={isConnectable}
-        onClick={handleHandleClick}
-      >
-        {
-          isConnectable && !getNodesReadOnly() && (
-            <BlockSelector
-              open={open}
-              onOpenChange={handleOpenChange}
-              onSelect={handleSelect}
-              asChild
-              triggerClassName={open => `
-                hidden absolute top-0 left-0 pointer-events-none 
-                ${nodeSelectorClassName}
-                group-hover:!flex
-                ${data.selected && '!flex'}
-                ${open && '!flex'}
-              `}
-              availableBlocksTypes={availableNextBlocks}
-            />
-          )
-        }
-      </Handle>
-    </Tooltip>
+      </div>
+      {
+        isConnectable && !getNodesReadOnly() && (
+          <BlockSelector
+            open={open}
+            onOpenChange={handleOpenChange}
+            onSelect={handleSelect}
+            asChild
+            triggerClassName={open => `
+              hidden absolute top-0 left-0 pointer-events-none 
+              ${nodeSelectorClassName}
+              group-hover:!flex
+              ${data.selected && '!flex'}
+              ${open && '!flex'}
+            `}
+            availableBlocksTypes={availableNextBlocks}
+          />
+        )
+      }
+    </Handle>
   )
 })
 NodeSourceHandle.displayName = 'NodeSourceHandle'