refactor(web): remove tooltip-plus and migrate to ui tooltip

web/app/components/workflow/nodes/llm/components/computer-use-config.tsx

@@ -4,8 +4,7 @@ import type { ToolSetting } from '../types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Switch from '@/app/components/base/switch'
-
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import FieldCollapse from '@/app/components/workflow/nodes/_base/components/collapse/field-collapse'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import ReferenceToolConfig from './reference-tool-config'
@@ -43,25 +42,37 @@ const ComputerUseConfig: FC<Props> = ({
         title={(
           <div className="flex items-center gap-1">
             {t(`${i18nPrefix}.title`, { ns: 'workflow' })}
-            <Tooltip
-              popupContent={t(`${i18nPrefix}.tooltip`, { ns: 'workflow' })}
-              triggerClassName="h-4 w-4"
-            />
+            <Tooltip>
+              <TooltipTrigger
+                delay={0}
+                className="flex h-4 w-4 items-center justify-center"
+              >
+                <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
+              </TooltipTrigger>
+              <TooltipContent>{t(`${i18nPrefix}.tooltip`, { ns: 'workflow' })}</TooltipContent>
+            </Tooltip>
           </div>
         )}
         noXSpacing
         operations={(
           <div>
-            <Tooltip
-              disabled={!disabledTip}
-              popupContent={disabledTip}
-            >
-              <Switch
-                size="md"
-                disabled={isDisabled}
-                value={enabled}
-                onChange={onChange}
+            <Tooltip>
+              <TooltipTrigger
+                disabled={!disabledTip}
+                render={(
+                  <div>
+                    <Switch
+                      size="md"
+                      disabled={isDisabled}
+                      value={enabled}
+                      onChange={onChange}
+                    />
+                  </div>
+                )}
               />
+              {disabledTip && (
+                <TooltipContent>{disabledTip}</TooltipContent>
+              )}
             </Tooltip>
           </div>
         )}

web/app/components/workflow/nodes/llm/components/tools/index.tsx

@@ -1,8 +1,7 @@
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import MultipleToolSelector from '@/app/components/plugins/plugin-detail-panel/multiple-tool-selector'
 import { BoxGroup } from '@/app/components/workflow/nodes/_base/components/layout'
 import { cn } from '@/utils/classnames'
@@ -42,31 +41,36 @@ const Tools = ({
         className: 'px-0',
       }}
     >
-      <Tooltip
-        disabled={!disabledTip}
-        popupContent={disabledTip}
-      >
-        <div className={cn(isDisabled && 'opacity-50')}>
-          <div className={cn(isDisabled && 'pointer-events-none')}>
-            <MultipleToolSelector
-              nodeId={nodeId}
-              nodeOutputVars={[]}
-              availableNodes={[]}
-              value={tools}
-              label={t('nodes.llm.tools.title', { ns: 'workflow' })}
-              tooltip={t('nodes.llm.tools.tooltip', { ns: 'workflow' })}
-              onChange={handleToolsChange}
-              supportCollapse
-              disabled={isDisabled}
-            />
-            {!hideMaxIterations && (
-              <MaxIterations
-                value={maxIterations}
-                onChange={handleMaxIterationsChange}
-              />
-            )}
-          </div>
-        </div>
+      <Tooltip>
+        <TooltipTrigger
+          disabled={!disabledTip}
+          render={(
+            <div className={cn(isDisabled && 'opacity-50')}>
+              <div className={cn(isDisabled && 'pointer-events-none')}>
+                <MultipleToolSelector
+                  nodeId={nodeId}
+                  nodeOutputVars={[]}
+                  availableNodes={[]}
+                  value={tools}
+                  label={t('nodes.llm.tools.title', { ns: 'workflow' })}
+                  tooltip={t('nodes.llm.tools.tooltip', { ns: 'workflow' })}
+                  onChange={handleToolsChange}
+                  supportCollapse
+                  disabled={isDisabled}
+                />
+                {!hideMaxIterations && (
+                  <MaxIterations
+                    value={maxIterations}
+                    onChange={handleMaxIterationsChange}
+                  />
+                )}
+              </div>
+            </div>
+          )}
+        />
+        {disabledTip && (
+          <TooltipContent>{disabledTip}</TooltipContent>
+        )}
       </Tooltip>
     </BoxGroup>
   )

web/app/components/workflow/nodes/llm/components/tools/max-iterations.tsx

@@ -1,6 +1,5 @@
 import { memo } from 'react'
-
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { useTranslation } from 'react-i18next'
 import {
   NumberField,
   NumberFieldControls,
@@ -9,6 +8,7 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/app/components/base/ui/number-field'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 
 import { cn } from '@/utils/classnames'
 
@@ -19,14 +19,23 @@ type MaxIterationsProps = {
   disabled?: boolean
 }
 const MaxIterations = ({ value = 10, onChange, className, disabled }: MaxIterationsProps) => {
+  const { t } = useTranslation()
+
   return (
     <div className={cn('mt-3 flex h-10 items-center justify-between', className)}>
       <div className="flex items-center">
-        <div className="mr-0.5 truncate uppercase text-text-secondary system-sm-semibold">Max Iterations</div>
-        <Tooltip
-          popupContent="Max Iterations is the maximum number of iterations to run the tool."
-          triggerClassName="shrink-0 w-4 h-4"
-        />
+        <div className="mr-0.5 truncate uppercase text-text-secondary system-sm-semibold">
+          {t('nodes.agent.maxIterations', { ns: 'workflow' })}
+        </div>
+        <Tooltip>
+          <TooltipTrigger
+            delay={0}
+            className="flex h-4 w-4 shrink-0 items-center justify-center"
+          >
+            <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
+          </TooltipTrigger>
+          <TooltipContent>{t('nodes.llm.tools.maxIterationsTooltip', { ns: 'workflow' })}</TooltipContent>
+        </Tooltip>
       </div>
       <NumberField
         value={value}

web/app/components/workflow/nodes/sub-graph-start/index.tsx

@@ -4,8 +4,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AssembleVariablesAlt } from '@/app/components/base/icons/src/vender/line/general'
 import { Agent } from '@/app/components/base/icons/src/vender/workflow'
-
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { NodeSourceHandle } from '@/app/components/workflow/nodes/_base/components/node-handle'
 import { cn } from '@/utils/classnames'
 
@@ -38,17 +37,22 @@ const SubGraphStartNode = ({ id, data }: NodeProps<SubGraphStartNodeData>) => {
         showTitle ? 'gap-1.5 px-2' : 'w-11',
       )}
     >
-      <Tooltip popupContent={tooltip} asChild={false}>
-        <div
-          className={cn(
-            'flex h-6 w-6 items-center justify-center border-[0.5px] border-components-panel-border-subtle',
-            iconType === 'agent'
-              ? 'rounded-[8px] bg-util-colors-indigo-indigo-500'
-              : 'rounded-full bg-util-colors-blue-brand-blue-brand-500',
+      <Tooltip>
+        <TooltipTrigger
+          render={(
+            <div
+              className={cn(
+                'flex h-6 w-6 items-center justify-center border-[0.5px] border-components-panel-border-subtle',
+                iconType === 'agent'
+                  ? 'rounded-[8px] bg-util-colors-indigo-indigo-500'
+                  : 'rounded-full bg-util-colors-blue-brand-blue-brand-500',
+              )}
+            >
+              <Icon className="h-3 w-3 text-text-primary-on-surface" />
+            </div>
           )}
-        >
-          <Icon className="h-3 w-3 text-text-primary-on-surface" />
-        </div>
+        />
+        <TooltipContent>{tooltip}</TooltipContent>
       </Tooltip>
       {showTitle && (
         <span className="max-w-[160px] truncate text-text-secondary system-xs-medium">