chore(web): add tooltips to workflow header buttons (#42307)

web/app/components/workflow/header/chat-variable-button.tsx

@@ -1,5 +1,6 @@
 import { cn } from '@langgenius/dify-ui/cn'
 import { IconButton } from '@langgenius/dify-ui/icon-button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/workflow/store'
@@ -22,23 +23,39 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
   }
 
   return (
-    <IconButton
-      aria-label={t(($) => $['chatVariable.panelTitle'], { ns: 'workflow' })}
-      aria-expanded={showChatVariablePanel}
-      size="lg"
-      className={cn(
-        'border border-transparent',
-        theme === 'dark' && showChatVariablePanel && 'border-black/5 bg-white/10 backdrop-blur-xs',
-      )}
-      disabled={disabled}
-      onClick={handleClick}
-      variant="ghost"
-    >
-      <span
-        aria-hidden
-        className="i-custom-vender-line-others-bubble-x size-4 text-components-button-secondary-text"
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <IconButton
+            aria-label={t(($) => $['chatVariable.panelTitle'], {
+              ns: 'workflow',
+            })}
+            aria-expanded={showChatVariablePanel}
+            size="lg"
+            className={cn(
+              'border border-transparent',
+              theme === 'dark' &&
+                showChatVariablePanel &&
+                'border-black/5 bg-white/10 backdrop-blur-xs',
+            )}
+            disabled={disabled}
+            onClick={handleClick}
+            variant="ghost"
+          >
+            <span
+              aria-hidden
+              className="i-custom-vender-line-others-bubble-x size-4 text-components-button-secondary-text"
+            />
+          </IconButton>
+        }
       />
-    </IconButton>
+
+      <TooltipContent>
+        {t(($) => $['chatVariable.panelTitle'], {
+          ns: 'workflow',
+        })}
+      </TooltipContent>
+    </Tooltip>
   )
 }
 

web/app/components/workflow/header/checklist/index.tsx

@@ -9,6 +9,7 @@ import {
   PopoverTitle,
   PopoverTrigger,
 } from '@langgenius/dify-ui/popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useEdges } from 'reactflow'
@@ -58,32 +59,39 @@ const WorkflowChecklist = ({ disabled, showGoTo = true, onItemClick }: WorkflowC
 
   return (
     <Popover open={open} onOpenChange={(newOpen) => !disabled && setOpen(newOpen)}>
-      <PopoverTrigger
-        disabled={disabled}
-        render={
-          <button
-            type="button"
-            className={cn(
-              'group relative ml-0.5 flex size-7 items-center justify-center rounded-md border-none bg-transparent p-0',
-              'data-disabled:cursor-not-allowed data-disabled:opacity-50',
-            )}
-            disabled={disabled || undefined}
-            aria-label={checklistLabel}
-          >
-            <span className="flex size-full items-center justify-center rounded-md group-data-popup-open:bg-state-accent-hover hover:bg-state-accent-hover">
-              <span
-                className="i-ri-list-check-3 size-4 text-components-button-ghost-text group-hover:text-components-button-secondary-accent-text group-data-popup-open:text-components-button-secondary-accent-text"
-                aria-hidden="true"
-              />
-            </span>
-            {!!needWarningNodes.length && (
-              <span className="absolute -top-1.5 -right-1.5 flex h-4.5 min-w-4.5 items-center justify-center rounded-full border border-gray-100 bg-text-warning-secondary text-[11px] font-semibold text-white">
-                {needWarningNodes.length}
-              </span>
-            )}
-          </button>
-        }
-      />
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <PopoverTrigger
+              disabled={disabled}
+              render={
+                <button
+                  type="button"
+                  className={cn(
+                    'group relative ml-0.5 flex size-7 items-center justify-center rounded-md border-none bg-transparent p-0',
+                    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+                  )}
+                  disabled={disabled || undefined}
+                  aria-label={checklistLabel}
+                >
+                  <span className="flex size-full items-center justify-center rounded-md group-data-popup-open:bg-state-accent-hover hover:bg-state-accent-hover">
+                    <span
+                      className="i-ri-list-check-3 size-4 text-components-button-ghost-text group-hover:text-components-button-secondary-accent-text group-data-popup-open:text-components-button-secondary-accent-text"
+                      aria-hidden="true"
+                    />
+                  </span>
+                  {!!needWarningNodes.length && (
+                    <span className="absolute -top-1.5 -right-1.5 flex h-4.5 min-w-4.5 items-center justify-center rounded-full border border-gray-100 bg-text-warning-secondary text-[11px] font-semibold text-white">
+                      {needWarningNodes.length}
+                    </span>
+                  )}
+                </button>
+              }
+            />
+          }
+        />
+        <TooltipContent>{checklistLabel}</TooltipContent>
+      </Tooltip>
       <PopoverContent
         placement="bottom-start"
         sideOffset={12}

web/app/components/workflow/header/env-button.tsx

@@ -1,5 +1,6 @@
 import { cn } from '@langgenius/dify-ui/cn'
 import { IconButton } from '@langgenius/dify-ui/icon-button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks/use-input-field-panel'
@@ -25,23 +26,30 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
   }
 
   return (
-    <IconButton
-      aria-label={t(($) => $['env.envPanelTitle'], { ns: 'workflow' })}
-      aria-expanded={showEnvPanel}
-      size="lg"
-      className={cn(
-        'border border-transparent',
-        theme === 'dark' && showEnvPanel && 'border-black/5 bg-white/10 backdrop-blur-xs',
-      )}
-      variant="ghost"
-      disabled={disabled}
-      onClick={handleClick}
-    >
-      <span
-        aria-hidden
-        className="i-custom-vender-line-others-env size-4 text-components-button-secondary-text"
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <IconButton
+            aria-label={t(($) => $['env.envPanelTitle'], { ns: 'workflow' })}
+            aria-expanded={showEnvPanel}
+            size="lg"
+            className={cn(
+              'border border-transparent',
+              theme === 'dark' && showEnvPanel && 'border-black/5 bg-white/10 backdrop-blur-xs',
+            )}
+            variant="ghost"
+            disabled={disabled}
+            onClick={handleClick}
+          >
+            <span
+              aria-hidden
+              className="i-custom-vender-line-others-env size-4 text-components-button-secondary-text"
+            />
+          </IconButton>
+        }
       />
-    </IconButton>
+      <TooltipContent>{t(($) => $['env.envPanelTitle'], { ns: 'workflow' })}</TooltipContent>
+    </Tooltip>
   )
 }
 

web/app/components/workflow/header/global-variable-button.tsx

@@ -1,5 +1,6 @@
 import { cn } from '@langgenius/dify-ui/cn'
 import { IconButton } from '@langgenius/dify-ui/icon-button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks/use-input-field-panel'
@@ -25,25 +26,32 @@ const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
   }
 
   return (
-    <IconButton
-      aria-label={t(($) => $['globalVar.title'], { ns: 'workflow' })}
-      aria-expanded={showGlobalVariablePanel}
-      size="lg"
-      className={cn(
-        'border border-transparent',
-        theme === 'dark' &&
-          showGlobalVariablePanel &&
-          'border-black/5 bg-white/10 backdrop-blur-xs',
-      )}
-      disabled={disabled}
-      onClick={handleClick}
-      variant="ghost"
-    >
-      <span
-        aria-hidden
-        className="i-custom-vender-line-others-global-variable size-4 text-components-button-secondary-text"
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <IconButton
+            aria-label={t(($) => $['globalVar.title'], { ns: 'workflow' })}
+            aria-expanded={showGlobalVariablePanel}
+            size="lg"
+            className={cn(
+              'border border-transparent',
+              theme === 'dark' &&
+                showGlobalVariablePanel &&
+                'border-black/5 bg-white/10 backdrop-blur-xs',
+            )}
+            disabled={disabled}
+            onClick={handleClick}
+            variant="ghost"
+          >
+            <span
+              aria-hidden
+              className="i-custom-vender-line-others-global-variable size-4 text-components-button-secondary-text"
+            />
+          </IconButton>
+        }
       />
-    </IconButton>
+      <TooltipContent>{t(($) => $['globalVar.title'], { ns: 'workflow' })}</TooltipContent>
+    </Tooltip>
   )
 }