diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
index 08ec07aa8d..9f82bdf441 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
@@ -96,7 +96,7 @@ const Item: FC<ItemProps> = ({
         >
           <div className='flex items-center w-0 grow'>
             <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />
-            <div className='ml-1 w-0 grow text-ellipsis text-[13px] font-normal text-gray-900'>{itemData.variable}</div>
+            <div title={itemData.variable} className='ml-1 w-0 grow truncate text-[13px] font-normal text-gray-900'>{itemData.variable}</div>
           </div>
           <div className='ml-1 shrink-0 text-xs font-normal text-gray-500 capitalize'>{itemData.type}</div>
           {isObj && (
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index f94bb68511..ebe2cc20e9 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -42,9 +42,9 @@ const VarItem: FC<Props> = ({
     <div ref={ref} className='flex items-center h-8 justify-between px-2.5 bg-white rounded-lg border border-gray-200 shadow-xs cursor-pointer hover:shadow-md'>
       <div className='flex items-center space-x-1 grow w-0'>
         <Variable02 className='w-3.5 h-3.5 text-primary-500' />
-        <div className='shrink-0 truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div>
+        <div title={payload.variable} className='shrink-0 max-w-[130px] truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div>
         {payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
-          <div className='grow w-0 truncate text-[13px] font-medium text-gray-500'>{payload.label}</div>
+          <div title={payload.label} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label}</div>
         </>)}
       </div>
       <div className='shrink-0 ml-2 flex items-center'>