feat: tooltip (#7634)

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}>