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

2026-05-05 09:58:04 +08:00 · 2026-03-25 13:35:43 +08:00
parent e94c689dd3
commit 720c950f9e
21 changed files with 434 additions and 348 deletions
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@ -10,8 +10,7 @@ import { Avatar } from '@/app/components/base/avatar'
 import Divider from '@/app/components/base/divider'
 import InlineDeleteConfirm from '@/app/components/base/inline-delete-confirm'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
 import { useAppContext } from '@/context/app-context'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
@ -375,66 +374,86 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
            {t('comments.panelTitle', { ns: 'workflow' })}
          </div>
          <div className="flex items-center gap-1">
-            <Tooltip
-              popupContent={t('comments.aria.deleteComment', { ns: 'workflow' })}
-              position="top"
-              popupClassName="!px-2 !py-1.5"
-            >
-              <button
-                type="button"
-                disabled={loading}
-                className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
-                onClick={onDelete}
-                aria-label={t('comments.aria.deleteComment', { ns: 'workflow' })}
-              >
-                <RiDeleteBinLine className="h-4 w-4" />
-              </button>
+            <Tooltip>
+              <TooltipTrigger
+                render={(
+                  <span className="inline-flex">
+                    <button
+                      type="button"
+                      disabled={loading}
+                      className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                      onClick={onDelete}
+                      aria-label={t('comments.aria.deleteComment', { ns: 'workflow' })}
+                    >
+                      <RiDeleteBinLine className="h-4 w-4" />
+                    </button>
+                  </span>
+                )}
+              />
+              <TooltipContent placement="top" popupClassName="!px-2 !py-1.5">
+                {t('comments.aria.deleteComment', { ns: 'workflow' })}
+              </TooltipContent>
            </Tooltip>
-            <Tooltip
-              popupContent={t('comments.aria.resolveComment', { ns: 'workflow' })}
-              position="top"
-              popupClassName="!px-2 !py-1.5"
-            >
-              <button
-                type="button"
-                disabled={comment.resolved || loading}
-                className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
-                onClick={onResolve}
-                aria-label={t('comments.aria.resolveComment', { ns: 'workflow' })}
-              >
-                {comment.resolved ? <RiCheckboxCircleFill className="h-4 w-4" /> : <RiCheckboxCircleLine className="h-4 w-4" />}
-              </button>
+            <Tooltip>
+              <TooltipTrigger
+                render={(
+                  <span className="inline-flex">
+                    <button
+                      type="button"
+                      disabled={comment.resolved || loading}
+                      className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                      onClick={onResolve}
+                      aria-label={t('comments.aria.resolveComment', { ns: 'workflow' })}
+                    >
+                      {comment.resolved ? <RiCheckboxCircleFill className="h-4 w-4" /> : <RiCheckboxCircleLine className="h-4 w-4" />}
+                    </button>
+                  </span>
+                )}
+              />
+              <TooltipContent placement="top" popupClassName="!px-2 !py-1.5">
+                {t('comments.aria.resolveComment', { ns: 'workflow' })}
+              </TooltipContent>
            </Tooltip>
            <Divider type="vertical" className="h-3.5" />
-            <Tooltip
-              popupContent={t('comments.aria.previousComment', { ns: 'workflow' })}
-              position="top"
-              popupClassName="!px-2 !py-1.5"
-            >
-              <button
-                type="button"
-                disabled={!canGoPrev || loading}
-                className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
-                onClick={onPrev}
-                aria-label={t('comments.aria.previousComment', { ns: 'workflow' })}
-              >
-                <RiArrowUpSLine className="h-4 w-4" />
-              </button>
+            <Tooltip>
+              <TooltipTrigger
+                render={(
+                  <span className="inline-flex">
+                    <button
+                      type="button"
+                      disabled={!canGoPrev || loading}
+                      className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                      onClick={onPrev}
+                      aria-label={t('comments.aria.previousComment', { ns: 'workflow' })}
+                    >
+                      <RiArrowUpSLine className="h-4 w-4" />
+                    </button>
+                  </span>
+                )}
+              />
+              <TooltipContent placement="top" popupClassName="!px-2 !py-1.5">
+                {t('comments.aria.previousComment', { ns: 'workflow' })}
+              </TooltipContent>
            </Tooltip>
-            <Tooltip
-              popupContent={t('comments.aria.nextComment', { ns: 'workflow' })}
-              position="top"
-              popupClassName="!px-2 !py-1.5"
-            >
-              <button
-                type="button"
-                disabled={!canGoNext || loading}
-                className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
-                onClick={onNext}
-                aria-label={t('comments.aria.nextComment', { ns: 'workflow' })}
-              >
-                <RiArrowDownSLine className="h-4 w-4" />
-              </button>
+            <Tooltip>
+              <TooltipTrigger
+                render={(
+                  <span className="inline-flex">
+                    <button
+                      type="button"
+                      disabled={!canGoNext || loading}
+                      className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                      onClick={onNext}
+                      aria-label={t('comments.aria.nextComment', { ns: 'workflow' })}
+                    >
+                      <RiArrowDownSLine className="h-4 w-4" />
+                    </button>
+                  </span>
+                )}
+              />
+              <TooltipContent placement="top" popupClassName="!px-2 !py-1.5">
+                {t('comments.aria.nextComment', { ns: 'workflow' })}
+              </TooltipContent>
            </Tooltip>
            <button
              type="button"
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@ -2,6 +2,7 @@
 import type { OnlineUser } from '../collaboration/types'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useReactFlow } from 'reactflow'
 import { Avatar } from '@/app/components/base/avatar'
 import Divider from '@/app/components/base/divider'
@ -10,8 +11,7 @@ import {
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useAppContext } from '@/context/app-context'
 import { getAvatar } from '@/service/common'
 import { cn } from '@/utils/classnames'
@ -52,6 +52,7 @@ const useAvatarUrls = (users: OnlineUser[]) => {
 }

 const OnlineUsers = () => {
+  const { t } = useTranslation()
  const appId = useStore(s => s.appId)
  const { onlineUsers, cursors, isEnabled: isCollaborationEnabled } = useCollaboration(appId as string)
  const { userProfile } = useAppContext()
@ -66,7 +67,7 @@ const OnlineUsers = () => {
    baseClassName: string,
    suffixClassName: string,
  ) => {
-    const baseName = user.username || 'User'
+    const baseName = user.username || t('comments.fallback.user', { ns: 'workflow' })
    const isCurrentUser = user.user_id === currentUserId

    return (
@ -74,7 +75,7 @@ const OnlineUsers = () => {
        <span>{baseName}</span>
        {isCurrentUser && (
          <span className={suffixClassName}>
-            (You)
+            {t('members.you', { ns: 'common' })}
          </span>
        )}
      </span>
@ -123,21 +124,9 @@ const OnlineUsers = () => {
              const isCurrentUser = user.user_id === currentUserId
              const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
              return (
-                <Tooltip
-                  key={`${user.sid}-${index}`}
-                  popupContent={renderDisplayName(
-                    user,
-                    'system-xs-medium text-text-secondary',
-                    'text-text-quaternary',
-                  )}
-                  position="bottom"
-                  triggerMethod="hover"
-                  needsDelay={false}
-                  asChild
-                  popupClassName="flex h-[28px] items-center justify-center gap-1 rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-[6px] shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
-                  noDecoration
-                >
-                  <div
+                <Tooltip key={`${user.sid}-${index}`}>
+                  <TooltipTrigger
+                    delay={0}
                    className={cn(
                      'relative flex size-6 items-center justify-center',
                      index > 0 && '-ml-1.5',
@ -147,13 +136,24 @@ const OnlineUsers = () => {
                    onClick={() => !isCurrentUser && jumpToUserCursor(user.user_id)}
                  >
                    <Avatar
-                      name={user.username || 'User'}
+                      name={user.username || t('comments.fallback.user', { ns: 'workflow' })}
                      avatar={getAvatarUrl(user) ?? null}
                      size="sm"
                      className="ring-1 ring-components-panel-bg"
                      backgroundColor={userColor}
                    />
-                  </div>
+                  </TooltipTrigger>
+                  <TooltipContent
+                    placement="bottom"
+                    variant="plain"
+                    popupClassName="flex h-[28px] items-center justify-center gap-1 rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-[6px] shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
+                  >
+                    {renderDisplayName(
+                      user,
+                      'system-xs-medium text-text-secondary',
+                      'text-text-quaternary',
+                    )}
+                  </TooltipContent>
                </Tooltip>
              )
            })}
@ -217,7 +217,7 @@ const OnlineUsers = () => {
                        >
                          <div className="relative">
                            <Avatar
-                              name={user.username || 'User'}
+                              name={user.username || t('comments.fallback.user', { ns: 'workflow' })}
                              avatar={getAvatarUrl(user) ?? null}
                              size="sm"
                              backgroundColor={userColor}
--- a/web/app/components/workflow/nodes/llm/components/computer-use-config.tsx
+++ b/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>
        )}
--- a/web/app/components/workflow/nodes/llm/components/tools/index.tsx
+++ b/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>
  )
--- a/web/app/components/workflow/nodes/llm/components/tools/max-iterations.tsx
+++ b/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}
--- a/web/app/components/workflow/nodes/sub-graph-start/index.tsx
+++ b/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">
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@ -10,8 +10,8 @@ import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import Loading from '@/app/components/base/loading'
-import Tooltip from '@/app/components/base/tooltip-plus'
 import { toast } from '@/app/components/base/ui/toast'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { submitHumanInputForm } from '@/service/workflow'
 import { cn } from '@/utils/classnames'
 import {
@ -126,14 +126,19 @@ const WorkflowPreview = () => {
      <div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
        {`${t('singleRun.testRun', { ns: 'workflow' })}${workflowRunningData ? formatWorkflowRunIdentifier(workflowRunningData.result.finished_at, t('common.running', { ns: 'workflow' })) : ''}`}
        <div className="flex items-center gap-1">
-          <Tooltip popupContent={t('operation.refresh', { ns: 'common' })}>
-            <ActionButton onClick={() => {
-              setUserSelectedTab(null)
-              handleClearWorkflowRunHistory()
-            }}
-            >
-              <RefreshCcw01 className="h-4 w-4" />
-            </ActionButton>
+          <Tooltip>
+            <TooltipTrigger
+              render={(
+                <ActionButton onClick={() => {
+                  setUserSelectedTab(null)
+                  handleClearWorkflowRunHistory()
+                }}
+                >
+                  <RefreshCcw01 className="h-4 w-4" />
+                </ActionButton>
+              )}
+            />
+            <TooltipContent>{t('operation.refresh', { ns: 'common' })}</TooltipContent>
          </Tooltip>
          <div className="mx-3 h-3.5 w-[1px] bg-divider-regular" />
          <div className="cursor-pointer p-1" onClick={() => handleCancelDebugAndPreviewPanel()}>
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@ -20,7 +20,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useStore as useReactFlowStore } from 'reactflow'
 import { shallow } from 'zustand/shallow'
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 import { useNodesInteractions, useNodesReadOnly, useNodesSyncDraft } from './hooks'
 import { useSelectionInteractions } from './hooks/use-selection-interactions'
@ -54,13 +54,14 @@ type AlignButtonProps = {

 const AlignButton: FC<AlignButtonProps> = ({ config, label, onClick, position = 'bottom' }) => {
  return (
-    <Tooltip position={position} popupContent={label}>
-      <div
+    <Tooltip>
+      <TooltipTrigger
        className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-text-secondary hover:bg-state-base-hover"
        onClick={() => onClick(config.type)}
      >
        {config.icon}
-      </div>
+      </TooltipTrigger>
+      <TooltipContent placement={position}>{label}</TooltipContent>
    </Tooltip>
  )
 }
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
@ -15,7 +15,7 @@ import {
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { START_TAB_ID } from '@/app/components/workflow/skill/constants'
 import { useSkillAssetNodeMap } from '@/app/components/workflow/skill/hooks/file-tree/data/use-skill-asset-tree'
 import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
@ -169,40 +169,48 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
      offset={4}
    >
      <PortalToFollowElemTrigger ref={ref} className="inline-flex">
-        <Tooltip popupContent={tooltipContent} disabled={!tooltipContent}>
-          <span
-            className={cn(
-              'inline-flex min-w-[18px] select-none items-center gap-[2px] overflow-hidden rounded-[5px] border py-[1px] pl-[1px] pr-[4px] shadow-xs',
-              isInteractive ? 'cursor-pointer' : 'cursor-default',
-              isMissing ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
-              isSelected && 'border-text-accent',
+        <Tooltip>
+          <TooltipTrigger
+            disabled={!tooltipContent}
+            render={(
+              <span
+                className={cn(
+                  'inline-flex min-w-[18px] select-none items-center gap-[2px] overflow-hidden rounded-[5px] border py-[1px] pl-[1px] pr-[4px] shadow-xs',
+                  isInteractive ? 'cursor-pointer' : 'cursor-default',
+                  isMissing ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
+                  isSelected && 'border-text-accent',
+                )}
+                onMouseDown={() => {
+                  if (!isInteractive)
+                    return
+                  setOpen(prev => !prev)
+                }}
+              >
+                <span className="flex items-center justify-center p-px">
+                  {isFolder
+                    ? <span className={cn('i-ri-folder-line size-[14px]', isMissing ? 'text-text-warning' : 'text-text-accent')} aria-hidden="true" />
+                    : (
+                        <FileTypeIcon
+                          type={(iconType || 'document') as FileAppearanceType}
+                          size="sm"
+                          className={cn('!size-[14px]', isMissing && '!text-text-warning')}
+                        />
+                      )}
+                </span>
+                <span className={cn('max-w-[180px] truncate text-[12px] font-medium leading-4', isMissing ? 'text-text-warning' : 'text-text-accent')}>
+                  {displayName}
+                </span>
+                {
+                  isMissing && (
+                    <span className="i-ri-alert-fill size-3 text-text-warning" />
+                  )
+                }
+              </span>
            )}
-            onMouseDown={() => {
-              if (!isInteractive)
-                return
-              setOpen(prev => !prev)
-            }}
-          >
-            <span className="flex items-center justify-center p-px">
-              {isFolder
-                ? <span className={cn('i-ri-folder-line size-[14px]', isMissing ? 'text-text-warning' : 'text-text-accent')} aria-hidden="true" />
-                : (
-                    <FileTypeIcon
-                      type={(iconType || 'document') as FileAppearanceType}
-                      size="sm"
-                      className={cn('!size-[14px]', isMissing && '!text-text-warning')}
-                    />
-                  )}
-            </span>
-            <span className={cn('max-w-[180px] truncate text-[12px] font-medium leading-4', isMissing ? 'text-text-warning' : 'text-text-accent')}>
-              {displayName}
-            </span>
-            {
-              isMissing && (
-                <span className="i-ri-alert-fill size-3 text-text-warning" />
-              )
-            }
-          </span>
+          />
+          {tooltipContent && (
+            <TooltipContent>{tooltipContent}</TooltipContent>
+          )}
        </Tooltip>
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent className="z-[1000]">
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import Loading from '@/app/components/base/loading'
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import SkillEditor from '@/app/components/workflow/skill/editor/skill-editor'
 import { useFileTypeInfo } from '@/app/components/workflow/skill/hooks/use-file-type-info'
 import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
@ -121,22 +121,29 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
            </div>
          )}
        </div>
-        <Tooltip
-          popupContent={t('skillEditor.openInSkillEditor', { ns: 'workflow' })}
-          disabled={!canOpenInEditor}
-        >
-          <button
-            type="button"
-            onClick={handleOpenInEditor}
+        <Tooltip>
+          <TooltipTrigger
            disabled={!canOpenInEditor}
-            className={cn(
-              'inline-flex size-6 items-center justify-center rounded-md text-text-tertiary transition hover:bg-state-base-hover',
-              !canOpenInEditor && 'cursor-not-allowed opacity-40 hover:bg-transparent',
+            render={(
+              <span className="inline-flex">
+                <button
+                  type="button"
+                  onClick={handleOpenInEditor}
+                  disabled={!canOpenInEditor}
+                  className={cn(
+                    'inline-flex size-6 items-center justify-center rounded-md text-text-tertiary transition hover:bg-state-base-hover',
+                    !canOpenInEditor && 'cursor-not-allowed opacity-40 hover:bg-transparent',
+                  )}
+                  aria-label={t('skillEditor.openInSkillEditor', { ns: 'workflow' })}
+                >
+                  <span className="i-ri-external-link-line size-4" />
+                </button>
+              </span>
            )}
-            aria-label={t('skillEditor.openInSkillEditor', { ns: 'workflow' })}
-          >
-            <span className="i-ri-external-link-line size-4" />
-          </button>
+          />
+          {canOpenInEditor && (
+            <TooltipContent>{t('skillEditor.openInSkillEditor', { ns: 'workflow' })}</TooltipContent>
+          )}
        </Tooltip>
        <button
          type="button"
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
@ -14,8 +14,7 @@ import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 // eslint-disable-next-line no-restricted-imports
 import Modal from '@/app/components/base/modal'
 import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
-
-import Tooltip from '@/app/components/base/tooltip-plus'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ToolAuthorizationSection from '@/app/components/plugins/plugin-detail-panel/tool-selector/sections/tool-authorization-section'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
@ -606,50 +605,56 @@ const ToolBlockComponent = ({
  return (
    <>
      <span ref={ref} className="inline-flex">
-        <Tooltip
-          disabled={!isToolMissing || isToolDisabled}
-          offset={4}
-          noDecoration
-          popupClassName="bg-transparent p-0"
-          popupContent={missingTooltipContent}
-        >
-          <span
-            className={cn(
-              'group/tool inline-flex items-center gap-[2px] rounded-[5px] border py-px pl-px pr-[3px] shadow-xs',
-              isTriggerInteractive ? 'cursor-pointer' : 'cursor-default',
-              isWarningStyle ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
-              isSelected && 'border-text-accent',
-            )}
-            title={`${provider}.${tool}`}
-            data-tool-config-id={configId}
-            onMouseDown={() => {
-              if (!isTriggerInteractive)
-                return
-              if (!currentProvider || !currentTool)
-                return
-              if (configuredToolValue)
-                setToolValue(configuredToolValue)
-              setIsSettingOpen(true)
-            }}
-          >
-            {renderIcon()}
-            <span className={cn('max-w-[180px] truncate system-xs-medium', isWarningStyle ? 'text-text-warning' : 'text-text-accent')}>
-              {isToolMissing ? missingDisplayLabel : displayLabel}
-            </span>
-            {(isToolMissing || isToolDisabled) && (
-              <>
-                <span className="flex h-4 items-center justify-center p-[2px] text-text-warning">
-                  <span className="i-ri-alert-fill h-3 w-3" />
+        <Tooltip>
+          <TooltipTrigger
+            disabled={!isToolMissing || isToolDisabled}
+            render={(
+              <span
+                className={cn(
+                  'group/tool inline-flex items-center gap-[2px] rounded-[5px] border py-px pl-px pr-[3px] shadow-xs',
+                  isTriggerInteractive ? 'cursor-pointer' : 'cursor-default',
+                  isWarningStyle ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
+                  isSelected && 'border-text-accent',
+                )}
+                title={`${provider}.${tool}`}
+                data-tool-config-id={configId}
+                onMouseDown={() => {
+                  if (!isTriggerInteractive)
+                    return
+                  if (!currentProvider || !currentTool)
+                    return
+                  if (configuredToolValue)
+                    setToolValue(configuredToolValue)
+                  setIsSettingOpen(true)
+                }}
+              >
+                {renderIcon()}
+                <span className={cn('max-w-[180px] truncate system-xs-medium', isWarningStyle ? 'text-text-warning' : 'text-text-accent')}>
+                  {isToolMissing ? missingDisplayLabel : displayLabel}
                </span>
-              </>
-            )}
-            {!isToolMissing && !isToolDisabled && needAuthorization && (
-              <span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
-                {authBadgeLabel}
-                <span className="i-ri-alert-fill h-3 w-3" />
+                {(isToolMissing || isToolDisabled) && (
+                  <span className="flex h-4 items-center justify-center p-[2px] text-text-warning">
+                    <span className="i-ri-alert-fill h-3 w-3" />
+                  </span>
+                )}
+                {!isToolMissing && !isToolDisabled && needAuthorization && (
+                  <span className="flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning system-2xs-medium-uppercase">
+                    {authBadgeLabel}
+                    <span className="i-ri-alert-fill h-3 w-3" />
+                  </span>
+                )}
              </span>
            )}
-          </span>
+          />
+          {isToolMissing && !isToolDisabled && (
+            <TooltipContent
+              sideOffset={4}
+              variant="plain"
+              popupClassName="bg-transparent p-0"
+            >
+              {missingTooltipContent}
+            </TooltipContent>
+          )}
        </Tooltip>
      </span>
      {useModalValue && (
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
@ -14,8 +14,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import Modal from '@/app/components/base/modal'
 import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
 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 { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ToolAuthorizationSection from '@/app/components/plugins/plugin-detail-panel/tool-selector/sections/tool-authorization-section'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
@ -910,35 +909,43 @@ const ToolGroupBlockComponent = ({
  return (
    <>
      <span ref={ref} className="inline-flex">
-        <Tooltip
-          disabled={!isToolMissing || isToolDisabled}
-          offset={4}
-          noDecoration
-          popupClassName="bg-transparent p-0"
-          popupContent={missingTooltipContent}
-        >
-          <span
-            className={cn(
-              'inline-flex items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
-              isTriggerInteractive ? 'group cursor-pointer' : 'cursor-default',
-              isWarningStyle ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
-              isSelected && 'border-text-accent',
+        <Tooltip>
+          <TooltipTrigger
+            disabled={!isToolMissing || isToolDisabled}
+            render={(
+              <span
+                className={cn(
+                  'inline-flex items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
+                  isTriggerInteractive ? 'group cursor-pointer' : 'cursor-default',
+                  isWarningStyle ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
+                  isSelected && 'border-text-accent',
+                )}
+                title={providerLabel}
+                onMouseDown={() => {
+                  if (!isTriggerInteractive)
+                    return
+                  if (!toolItems.length)
+                    return
+                  setIsSettingOpen(true)
+                }}
+              >
+                {renderIcon()}
+                <span className={cn('max-w-[160px] truncate system-xs-medium', isWarningStyle ? 'text-text-warning' : 'text-text-accent')}>
+                  {isToolMissing ? missingDisplayLabel : providerLabel}
+                </span>
+                {toolStatusBadge}
+              </span>
            )}
-            title={providerLabel}
-            onMouseDown={() => {
-              if (!isTriggerInteractive)
-                return
-              if (!toolItems.length)
-                return
-              setIsSettingOpen(true)
-            }}
-          >
-            {renderIcon()}
-            <span className={cn('max-w-[160px] truncate system-xs-medium', isWarningStyle ? 'text-text-warning' : 'text-text-accent')}>
-              {isToolMissing ? missingDisplayLabel : providerLabel}
-            </span>
-            {toolStatusBadge}
-          </span>
+          />
+          {isToolMissing && !isToolDisabled && (
+            <TooltipContent
+              sideOffset={4}
+              variant="plain"
+              popupClassName="bg-transparent p-0"
+            >
+              {missingTooltipContent}
+            </TooltipContent>
+          )}
        </Tooltip>
      </span>
      {useModalValue && (
--- a/web/app/components/workflow/workflow-preview/components/nodes/sub-graph-start/index.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/sub-graph-start/index.tsx
@ -4,7 +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 { cn } from '@/utils/classnames'
 import { NodeSourceHandle } from '../../node-handle'

@ -37,10 +37,15 @@ const SubGraphStartNode = ({ id, data }: NodeProps<SubGraphStartNodeData>) => {
        showTitle ? 'gap-1.5 px-2' : 'w-11',
      )}
    >
-      <Tooltip popupContent={tooltip} asChild={false}>
-        <div className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500">
-          <Icon className="h-3 w-3 text-text-primary-on-surface" />
-        </div>
+      <Tooltip>
+        <TooltipTrigger
+          render={(
+            <div className="flex h-6 w-6 items-center justify-center rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500">
+              <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">