feat: tooltip (#7634)

web/app/components/workflow/block-selector/blocks.tsx

@@ -67,10 +67,9 @@ const Blocks = ({
           list.map(block => (
             <Tooltip
               key={block.type}
-              selector={`workflow-block-${block.type}`}
               position='right'
-              className='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
-              htmlContent={(
+              popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
+              popupContent={(
                 <div>
                   <BlockIcon
                     size='md'
@@ -81,7 +80,6 @@ const Blocks = ({
                   <div className='text-xs text-gray-700 leading-[18px]'>{nodesExtraData[block.type].about}</div>
                 </div>
               )}
-              noArrow
             >
               <div
                 key={block.type}

web/app/components/workflow/block-selector/tools.tsx

@@ -44,10 +44,9 @@ const Blocks = ({
           list.map(tool => (
             <Tooltip
               key={tool.name}
-              selector={`workflow-block-tool-${tool.name}`}
               position='right'
-              className='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
-              htmlContent={(
+              popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
+              popupContent={(
                 <div>
                   <BlockIcon
                     size='md'
@@ -59,7 +58,6 @@ const Blocks = ({
                   <div className='text-xs text-gray-700 leading-[18px]'>{tool.description[language]}</div>
                 </div>
               )}
-              noArrow
             >
               <div
                 className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
@@ -77,7 +75,7 @@ const Blocks = ({
                   type={BlockEnum.Tool}
                   toolIcon={toolWithProvider.icon}
                 />
-                <div className='text-sm text-gray-900 truncate'>{tool.label[language]}</div>
+                <div className='text-sm text-gray-900 flex-1 min-w-0 truncate'>{tool.label[language]}</div>
               </div>
             </Tooltip>
           ))

web/app/components/workflow/header/view-history.tsx

@@ -24,7 +24,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
   ClockPlay,
@@ -100,7 +100,7 @@ const ViewHistory = ({
           }
           {
             !withText && (
-              <TooltipPlus
+              <Tooltip
                 popupContent={t('workflow.common.viewRunHistory')}
               >
                 <div
@@ -112,7 +112,7 @@ const ViewHistory = ({
                 >
                   <ClockPlay className={cn('w-4 h-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
                 </div>
-              </TooltipPlus>
+              </Tooltip>
             )
           }
         </PortalToFollowElemTrigger>

web/app/components/workflow/nodes/_base/components/field.tsx

@@ -3,12 +3,11 @@ import type { FC } from 'react'
 import React from 'react'
 import {
   RiArrowDownSLine,
-  RiQuestionLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import type { DefaultTFuncReturn } from 'i18next'
 import cn from '@/utils/classnames'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
   className?: string
@@ -40,12 +39,11 @@ const Filed: FC<Props> = ({
         <div className='flex items-center h-6'>
           <div className='system-sm-semibold-uppercase text-text-secondary'>{title}</div>
           {tooltip && (
-            <TooltipPlus popupContent={
-              <div className='w-[120px]'>
-                {tooltip}
-              </div>}>
-              <RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-text-quaternary' />
-            </TooltipPlus>
+            <Tooltip
+              popupContent={tooltip}
+              popupClassName='ml-1'
+              triggerClassName='w-4 h-4 ml-1'
+            />
           )}
 
         </div>

web/app/components/workflow/nodes/_base/components/help-link.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiBookOpenLine } from '@remixicon/react'
 import { useNodeHelpLink } from '../hooks/use-node-help-link'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import TooltipPlus from '@/app/components/base/tooltip'
 import type { BlockEnum } from '@/app/components/workflow/types'
 
 type HelpLinkProps = {
@@ -15,7 +15,9 @@ const HelpLink = ({
   const link = useNodeHelpLink(nodeType)
 
   return (
-    <TooltipPlus popupContent={t('common.userProfile.helpCenter')}>
+    <TooltipPlus
+      popupContent={t('common.userProfile.helpCenter')}
+    >
       <a
         href={link}
         target='_blank'

web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx

@@ -11,7 +11,7 @@ import type {
 import { BlockEnum } from '@/app/components/workflow/types'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
   instanceId?: string
@@ -109,13 +109,13 @@ const Editor: FC<Props> = ({
         {readOnly && <div className='absolute inset-0 z-10'></div>}
         {isFocus && (
           <div className={cn('absolute z-10', insertVarTipToLeft ? 'top-1.5 left-[-12px]' : ' top-[-9px] right-1')}>
-            <TooltipPlus
+            <Tooltip
               popupContent={`${t('workflow.common.insertVarTip')}`}
             >
               <div className='p-0.5 rounded-[5px] shadow-lg cursor-pointer bg-white hover:bg-gray-100 border-[0.5px] border-black/5'>
                 <Variable02 className='w-3.5 h-3.5 text-components-button-secondary-accent-text' />
               </div>
-            </TooltipPlus>
+            </Tooltip>
           </div>
         )}
       </>

web/app/components/workflow/nodes/_base/components/node-control.tsx

@@ -19,7 +19,7 @@ import PanelOperator from './panel-operator'
 import {
   Stop,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 type NodeControlProps = Pick<Node, 'id' | 'data'>
 const NodeControl: FC<NodeControlProps> = ({
@@ -68,11 +68,12 @@ const NodeControl: FC<NodeControlProps> = ({
                 data._isSingleRun
                   ? <Stop className='w-3 h-3' />
                   : (
-                    <TooltipPlus
+                    <Tooltip
                       popupContent={t('workflow.panel.runThisStep')}
+                      asChild={false}
                     >
                       <RiPlayLargeLine className='w-3 h-3' />
-                    </TooltipPlus>
+                    </Tooltip>
                   )
               }
             </div>

web/app/components/workflow/nodes/_base/components/option-card.tsx

@@ -3,9 +3,8 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import type { VariantProps } from 'class-variance-authority'
 import { cva } from 'class-variance-authority'
-import { RiQuestionLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 const variants = cva([], {
   variants: {
@@ -59,13 +58,15 @@ const OptionCard: FC<Props> = ({
       onClick={handleSelect}
     >
       <span>{title}</span>
-      {tooltip && <TooltipPlus
-        popupContent={<div className='w-[240px]'>
-          {tooltip}
-        </div>}
-      >
-        <RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-text-quaternary' />
-      </TooltipPlus>}
+      {tooltip
+        && <Tooltip
+          popupContent={
+            <div className='w-[240px]'>
+              {tooltip}
+            </div>
+          }
+        />
+      }
     </div>
   )
 }

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -31,7 +31,7 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-editor/plugins/update-block'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import ActionButton from '@/app/components/base/action-button'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars'
 import Switch from '@/app/components/base/switch'
 import { Jinja } from '@/app/components/base/icons/src/vender/workflow'
@@ -141,14 +141,14 @@ const Editor: FC<Props> = ({
               {/* Operations */}
               <div className='flex items-center space-x-[2px]'>
                 {isSupportJinja && (
-                  <TooltipPlus
+                  <Tooltip
                     popupContent={
                       <div>
                         <div>{t('workflow.common.enableJinja')}</div>
                         <a className='text-[#155EEF]' target='_blank' href='https://jinja.palletsprojects.com/en/2.10.x/'>{t('workflow.common.learnMore')}</a>
                       </div>
                     }
-                    hideArrow
+                    needsDelay
                   >
                     <div className={cn(editionType === EditionType.jinja2 && 'border-black/5 bg-white', 'flex h-[22px] items-center px-1.5 rounded-[5px] border border-transparent hover:border-black/5 space-x-0.5')}>
                       <Jinja className='w-6 h-3 text-gray-300' />
@@ -160,18 +160,17 @@ const Editor: FC<Props> = ({
                         }}
                       />
                     </div>
-                  </TooltipPlus>
+                  </Tooltip>
 
                 )}
                 {!readOnly && (
-                  <TooltipPlus
+                  <Tooltip
                     popupContent={`${t('workflow.common.insertVarTip')}`}
-                    asChild
                   >
                     <ActionButton onClick={handleInsertVariable}>
                       <Variable02 className='w-4 h-4' />
                     </ActionButton>
-                  </TooltipPlus>
+                  </Tooltip>
                 )}
                 {showRemove && (
                   <ActionButton onClick={onRemove}>

web/app/components/workflow/nodes/_base/panel.tsx

@@ -35,7 +35,7 @@ import {
   useWorkflowHistory,
 } from '@/app/components/workflow/hooks'
 import { canRunBySingle } from '@/app/components/workflow/utils'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import type { Node } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore } from '@/app/components/workflow/store'
@@ -127,8 +127,9 @@ const BasePanel: FC<BasePanelProps> = ({
             <div className='shrink-0 flex items-center text-gray-500'>
               {
                 canRunBySingle(data.type) && !nodesReadOnly && (
-                  <TooltipPlus
+                  <Tooltip
                     popupContent={t('workflow.panel.runThisStep')}
+                    popupClassName='mr-1'
                   >
                     <div
                       className='flex items-center justify-center mr-1 w-6 h-6 rounded-md hover:bg-black/5 cursor-pointer'
@@ -139,7 +140,7 @@ const BasePanel: FC<BasePanelProps> = ({
                     >
                       <RiPlayLargeLine className='w-4 h-4 text-text-tertiary' />
                     </div>
-                  </TooltipPlus>
+                  </Tooltip>
                 )
               }
               <HelpLink nodeType={data.type} />

web/app/components/workflow/nodes/iteration/add-block.tsx

@@ -29,7 +29,7 @@ import type {
 import {
   BlockEnum,
 } from '@/app/components/workflow/types'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 type AddBlockProps = {
   iterationNodeId: string
@@ -99,11 +99,11 @@ const AddBlock = ({
 
   return (
     <div className='absolute top-12 left-6 flex items-center h-8 z-10'>
-      <TooltipPlus popupContent={t('workflow.blocks.iteration-start')}>
+      <Tooltip popupContent={t('workflow.blocks.iteration-start')}>
         <div className='flex items-center justify-center w-6 h-6 rounded-full border-[0.5px] border-black/[0.02] shadow-md bg-primary-500'>
           <IterationStart className='w-4 h-4 text-white' />
         </div>
-      </TooltipPlus>
+      </Tooltip>
       <div className='group/insert relative w-16 h-0.5 bg-gray-300'>
         {
           iterationNodeData.startNodeType && (

web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx

@@ -3,13 +3,12 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
 import { uniqueId } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
-import { RiQuestionLine } from '@remixicon/react'
 import type { ModelConfig, PromptItem, Variable } from '../../../types'
 import { EditionType } from '../../../types'
 import { useWorkflowStore } from '../../../store'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import { PromptRole } from '@/models/debug'
 
 const i18nPrefix = 'workflow.nodes.llm'
@@ -118,13 +117,12 @@ const ConfigPromptItem: FC<Props> = ({
               />
             )}
 
-          <TooltipPlus
+          <Tooltip
             popupContent={
               <div className='max-w-[180px]'>{t(`${i18nPrefix}.roleDescription.${payload.role}`)}</div>
             }
-          >
-            <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
-          </TooltipPlus>
+            triggerClassName='w-4 h-4'
+          />
         </div>
       }
       value={payload.edition_type === EditionType.jinja2 ? (payload.jinja2_text || '') : payload.text}

web/app/components/workflow/nodes/llm/panel.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiQuestionLine } from '@remixicon/react'
 import MemoryConfig from '../_base/components/memory-config'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import useConfig from './use-config'
@@ -19,7 +18,7 @@ import { InputVarType, type NodePanelProps } from '@/app/components/workflow/typ
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import Switch from '@/app/components/base/switch'
 const i18nPrefix = 'workflow.nodes.llm'
@@ -206,11 +205,10 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
             <div className='flex justify-between items-center h-8 pl-3 pr-2 rounded-lg bg-gray-100'>
               <div className='flex items-center space-x-1'>
                 <div className='text-xs font-semibold text-gray-700 uppercase'>{t('workflow.nodes.common.memories.title')}</div>
-                <TooltipPlus
+                <Tooltip
                   popupContent={t('workflow.nodes.common.memories.tip')}
-                >
-                  <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
-                </TooltipPlus>
+                  triggerClassName='w-4 h-4'
+                />
               </div>
               <div className='flex items-center h-[18px] px-1 rounded-[5px] border border-black/8 text-xs font-semibold text-gray-500 uppercase'>{t('workflow.nodes.common.memories.builtIn')}</div>
             </div>
@@ -219,13 +217,12 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
               <Editor
                 title={<div className='flex items-center space-x-1'>
                   <div className='text-xs font-semibold text-gray-700 uppercase'>user</div>
-                  <TooltipPlus
+                  <Tooltip
                     popupContent={
                       <div className='max-w-[180px]'>{t('workflow.nodes.llm.roleDescription.user')}</div>
                     }
-                  >
-                    <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
-                  </TooltipPlus>
+                    triggerClassName='w-4 h-4'
+                  />
                 </div>}
                 value={inputs.memory.query_prompt_template || '{{#sys.query#}}'}
                 onChange={handleSyeQueryChange}

web/app/components/workflow/nodes/parameter-extractor/panel.tsx

@@ -1,9 +1,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
 import MemoryConfig from '../_base/components/memory-config'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import Editor from '../_base/components/prompt/editor'
@@ -19,7 +16,7 @@ import Split from '@/app/components/workflow/nodes/_base/components/split'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import { InputVarType, type NodePanelProps } from '@/app/components/workflow/types'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 import { VarType } from '@/app/components/workflow/types'
 
@@ -126,12 +123,14 @@ const Panel: FC<NodePanelProps<ParameterExtractorNodeType>> = ({
           title={
             <div className='flex items-center space-x-1'>
               <span className='uppercase'>{t(`${i18nPrefix}.instruction`)}</span>
-              <TooltipPlus popupContent={
-                <div className='w-[120px]'>
-                  {t(`${i18nPrefix}.instructionTip`)}
-                </div>}>
-                <RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
-              </TooltipPlus>
+              <Tooltip
+                popupContent={
+                  <div className='w-[120px]'>
+                    {t(`${i18nPrefix}.instructionTip`)}
+                  </div>
+                }
+                triggerClassName='w-3.5 h-3.5 ml-0.5'
+              />
             </div>
           }
           value={inputs.instruction}

web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx

@@ -2,13 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
 import MemoryConfig from '../../_base/components/memory-config'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import type { Memory, Node, NodeOutPutVar } from '@/app/components/workflow/types'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
 type Props = {
@@ -50,12 +47,14 @@ const AdvancedSetting: FC<Props> = ({
         title={
           <div className='flex items-center space-x-1'>
             <span className='uppercase'>{t(`${i18nPrefix}.instruction`)}</span>
-            <TooltipPlus popupContent={
-              <div className='w-[120px]'>
-                {t(`${i18nPrefix}.instructionTip`)}
-              </div>}>
-              <RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
-            </TooltipPlus>
+            <Tooltip
+              popupContent={
+                <div className='w-[120px]'>
+                  {t(`${i18nPrefix}.instructionTip`)}
+                </div>
+              }
+              triggerClassName='w-3.5 h-3.5 ml-0.5'
+            />
           </div>
         }
         value={instruction}

web/app/components/workflow/note-node/note-editor/toolbar/command.tsx

@@ -13,7 +13,7 @@ import {
 import { useStore } from '../store'
 import { useCommand } from './hooks'
 import cn from '@/utils/classnames'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 type CommandProps = {
   type: 'bold' | 'italic' | 'strikethrough' | 'link' | 'bullet'
@@ -60,7 +60,9 @@ const Command = ({
   }, [type, t])
 
   return (
-    <TooltipPlus popupContent={tip}>
+    <Tooltip
+      popupContent={tip}
+    >
       <div
         className={cn(
           'flex items-center justify-center w-8 h-8 cursor-pointer rounded-md text-gray-500 hover:text-gray-800 hover:bg-black/5',
@@ -74,7 +76,7 @@ const Command = ({
       >
         {icon}
       </div>
-    </TooltipPlus>
+    </Tooltip>
   )
 }
 

web/app/components/workflow/operator/tip-popup.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import ShortcutsName from '../shortcuts-name'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 
 type TipPopupProps = {
   title: string
@@ -13,9 +13,8 @@ const TipPopup = ({
   shortcuts,
 }: TipPopupProps) => {
   return (
-    <TooltipPlus
+    <Tooltip
       offset={4}
-      hideArrow
       popupClassName='!p-0 !bg-gray-25'
       popupContent={
         <div className='flex items-center gap-1 px-2 h-6 text-xs font-medium text-gray-700 rounded-lg border-[0.5px] border-black/5'>
@@ -27,7 +26,7 @@ const TipPopup = ({
       }
     >
       {children}
-    </TooltipPlus>
+    </Tooltip>
   )
 }
 

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -18,7 +18,7 @@ import ChatWrapper from './chat-wrapper'
 import cn from '@/utils/classnames'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import { useStore } from '@/app/components/workflow/store'
 
@@ -63,31 +63,31 @@ const DebugAndPreview = () => {
       <div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2 text-text-primary system-xl-semibold'>
         <div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
         <div className='flex items-center gap-1'>
-          <TooltipPlus
+          <Tooltip
             popupContent={t('common.operation.refresh')}
           >
             <ActionButton onClick={() => handleRestartChat()}>
               <RefreshCcw01 className='w-4 h-4' />
             </ActionButton>
-          </TooltipPlus>
+          </Tooltip>
           {varList.length > 0 && (
-            <TooltipPlus
+            <Tooltip
               popupContent={t('workflow.chatVariable.panelTitle')}
             >
               <ActionButton onClick={() => setShowConversationVariableModal(true)}>
                 <BubbleX className='w-4 h-4' />
               </ActionButton>
-            </TooltipPlus>
+            </Tooltip>
           )}
           {variables.length > 0 && (
             <div className='relative'>
-              <TooltipPlus
+              <Tooltip
                 popupContent={t('workflow.panel.userInputField')}
               >
                 <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
                   <RiEqualizer2Line className='w-4 h-4' />
                 </ActionButton>
-              </TooltipPlus>
+              </Tooltip>
               {expanded && <div className='absolute z-10 bottom-[-17px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45'/>}
             </div>
           )}

web/app/components/workflow/panel/env-panel/variable-modal.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { v4 as uuid4 } from 'uuid'
-import { RiCloseLine, RiQuestionLine } from '@remixicon/react'
+import { RiCloseLine } from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
-import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Tooltip from '@/app/components/base/tooltip'
 import { ToastContext } from '@/app/components/base/toast'
 import { useStore } from '@/app/components/workflow/store'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
@@ -102,13 +102,14 @@ const VariableModal = ({
               type === 'secret' && 'text-text-primary font-medium border-[1.5px] shadow-xs bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border hover:border-components-option-card-option-selected-border',
             )} onClick={() => setType('secret')}>
               <span>Secret</span>
-              <TooltipPlus popupContent={
-                <div className='w-[240px]'>
-                  {t('workflow.env.modal.secretTip')}
-                </div>
-              }>
-                <RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-text-quaternary' />
-              </TooltipPlus>
+              <Tooltip
+                popupContent={
+                  <div className='w-[240px]'>
+                    {t('workflow.env.modal.secretTip')}
+                  </div>
+                }
+                triggerClassName='ml-0.5 w-3.5 h-3.5'
+              />
             </div>
           </div>
         </div>