From 229b4d621e35e5621d78e49050dfc322c0c203bb Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Wed, 16 Jul 2025 11:26:54 +0800
Subject: [PATCH] Improve Tooltip UX by enabling delay by default (#21383)

---
 .../(datasetDetailLayout)/[datasetId]/layout-main.tsx         | 2 --
 .../app/configuration/config/agent/agent-tools/index.tsx      | 3 ---
 .../components/app/configuration/prompt-value-panel/index.tsx | 2 +-
 web/app/components/base/tooltip/index.spec.tsx                | 2 +-
 web/app/components/base/tooltip/index.tsx                     | 4 ++--
 web/app/components/datasets/documents/list.tsx                | 2 --
 .../components/header/account-setting/members-page/index.tsx  | 1 -
 .../model-parameter-modal/status-indicators.tsx               | 2 --
 .../provider-added-card/model-list-item.tsx                   | 1 -
 .../components/plugins/plugin-detail-panel/endpoint-list.tsx  | 1 -
 .../plugin-detail-panel/multiple-tool-selector/index.tsx      | 1 -
 .../plugins/plugin-detail-panel/tool-selector/tool-item.tsx   | 1 -
 .../nodes/_base/components/agent-strategy-selector.tsx        | 1 -
 .../workflow/nodes/_base/components/prompt/editor.tsx         | 1 -
 web/app/signin/oneMoreStep.tsx                                | 1 -
 15 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index acaae3f720..426778c835 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -62,7 +62,6 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
           <Tooltip
             position='right'
             noDecoration
-            needsDelay
             popupContent={
               <LinkedAppsPanel
                 relatedApps={relatedApps.data}
@@ -87,7 +86,6 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
       <Tooltip
         position='right'
         noDecoration
-        needsDelay
         popupContent={
           <div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
             <div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 66fe85a170..a1b82ab2fe 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -209,7 +209,6 @@ const AgentTools: FC = () => {
                   <span className='text-text-tertiary'>{item.tool_label}</span>
                   {!item.isDeleted && (
                     <Tooltip
-                      needsDelay
                       popupContent={
                         <div className='w-[180px]'>
                           <div className='mb-1.5 text-text-secondary'>{item.tool_name}</div>
@@ -232,7 +231,6 @@ const AgentTools: FC = () => {
                   <div className='mr-2 flex items-center'>
                     <Tooltip
                       popupContent={t('tools.toolRemoved')}
-                      needsDelay
                     >
                       <div className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
                         <AlertTriangle className='h-4 w-4 text-[#F79009]' />
@@ -259,7 +257,6 @@ const AgentTools: FC = () => {
                     {!item.notAuthor && (
                       <Tooltip
                         popupContent={t('tools.setBuiltInTools.infoAndSetting')}
-                        needsDelay
                       >
                         <div className='cursor-pointer rounded-md p-1  hover:bg-black/5' onClick={() => {
                           setCurrentTool(item)
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index e509ee50e4..b36bf8848a 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -177,7 +177,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
           <div className='flex justify-between border-t border-divider-subtle p-4 pt-3'>
             <Button className='w-[72px]' onClick={onClear}>{t('common.operation.clear')}</Button>
             {canNotRun && (
-              <Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')} needsDelay>
+              <Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')}>
                 <Button
                   variant="primary"
                   disabled={canNotRun}
diff --git a/web/app/components/base/tooltip/index.spec.tsx b/web/app/components/base/tooltip/index.spec.tsx
index 1b9b7a0eee..38cb107197 100644
--- a/web/app/components/base/tooltip/index.spec.tsx
+++ b/web/app/components/base/tooltip/index.spec.tsx
@@ -50,7 +50,7 @@ describe('Tooltip', () => {
 
     test('should close on mouse leave when triggerMethod is hover', () => {
       const triggerClassName = 'custom-trigger'
-      const { container } = render(<Tooltip popupContent="Tooltip content" triggerClassName={triggerClassName} />)
+      const { container } = render(<Tooltip popupContent="Tooltip content" triggerClassName={triggerClassName} needsDelay={false} />)
       const trigger = container.querySelector(`.${triggerClassName}`)
       act(() => {
         fireEvent.mouseEnter(trigger!)
diff --git a/web/app/components/base/tooltip/index.tsx b/web/app/components/base/tooltip/index.tsx
index 697d6e3d96..92a1afe691 100644
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@@ -33,7 +33,7 @@ const Tooltip: FC<TooltipProps> = ({
   noDecoration,
   offset,
   asChild = true,
-  needsDelay = false,
+  needsDelay = true,
 }) => {
   const [open, setOpen] = useState(false)
   const [isHoverPopup, {
@@ -68,7 +68,7 @@ const Tooltip: FC<TooltipProps> = ({
       setTimeout(() => {
         if (!isHoverPopupRef.current && !isHoverTriggerRef.current)
           setOpen(false)
-      }, 500)
+      }, 300)
     }
     else {
       setOpen(false)
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index c54b6a1a37..2eb6a3ac1e 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -154,7 +154,6 @@ export const StatusItem: FC<{
           <Tooltip
             popupContent={t('datasetDocuments.list.action.enableWarning')}
             popupClassName='text-text-secondary system-xs-medium'
-            needsDelay
             disabled={!archived}
           >
             <Switch
@@ -285,7 +284,6 @@ export const OperationAction: FC<{
           ? <Tooltip
             popupContent={t('datasetDocuments.list.action.enableWarning')}
             popupClassName='!font-semibold'
-            needsDelay
           >
             <div>
               <Switch defaultValue={false} onChange={noop} disabled={true} size='md' />
diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
index df7aae6b62..eb8a0291de 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -70,7 +70,6 @@ const MembersPage = () => {
               {isCurrentWorkspaceOwner && <span>
                 <Tooltip
                   popupContent={t('common.account.editWorkspaceInfo')}
-                  needsDelay
                 >
                   <div
                     className='cursor-pointer rounded-md p-1 hover:bg-black/5'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
index 02b8cb2448..259a686d6f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
@@ -63,7 +63,6 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
                 '/plugins',
               )}
               asChild={false}
-              needsDelay={true}
             >
               <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
             </Tooltip>
@@ -87,7 +86,6 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
             '/plugins',
           )}
           asChild={false}
-          needsDelay
         >
           <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
         </Tooltip>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
index 62ad4252aa..5439da669e 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@@ -105,7 +105,6 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
                 popupContent={
                   <span className='font-semibold'>{t('common.modelProvider.modelHasBeenDeprecated')}</span>} offset={{ mainAxis: 4 }
                 }
-                needsDelay
               >
                 <Switch defaultValue={false} disabled size='md' />
               </Tooltip>
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index b31b45c0c7..5735022c5d 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -68,7 +68,6 @@ const EndpointList = ({ detail }: Props) => {
           {t('plugin.detailPanel.endpoints')}
           <Tooltip
             position='right'
-            needsDelay
             popupClassName='w-[240px] p-4 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'
             popupContent={
               <div className='flex flex-col gap-2'>
diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
index 2c700c6dc8..44212e38ed 100644
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -114,7 +114,6 @@ const MultipleToolSelector = ({
           {tooltip && (
             <Tooltip
               popupContent={tooltip}
-              needsDelay
             >
               <div><RiQuestionLine className='h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
             </Tooltip>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
index 5cc9b7a3a8..6fa0ce57ab 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@@ -161,7 +161,6 @@ const ToolItem = ({
       {isError && (
         <Tooltip
           popupContent={errorTip}
-          needsDelay
         >
           <div>
             <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index ba5281870f..c872952900 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -49,7 +49,6 @@ const NotFoundWarn = (props: {
         </p>
       </div>
     }
-    needsDelay
   >
     <div>
       <RiErrorWarningFill className='size-4 text-text-destructive' />
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 0a7ebc2a09..b28e8a1ca3 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -173,7 +173,6 @@ const Editor: FC<Props> = ({
                         <a className='text-text-accent' target='_blank' href='https://jinja.palletsprojects.com/en/2.10.x/'>{t('workflow.common.learnMore')}</a>
                       </div>
                     }
-                    needsDelay
                   >
                     <div className={cn(editionType === EditionType.jinja2 && 'border-components-button-ghost-bg-hover bg-components-button-ghost-bg-hover', 'flex h-[22px] items-center space-x-0.5 rounded-[5px] border border-transparent px-1.5 hover:border-components-button-ghost-bg-hover')}>
                       <Jinja className='h-3 w-6 text-text-quaternary' />
diff --git a/web/app/signin/oneMoreStep.tsx b/web/app/signin/oneMoreStep.tsx
index 06a9ddba90..3569cf96d9 100644
--- a/web/app/signin/oneMoreStep.tsx
+++ b/web/app/signin/oneMoreStep.tsx
@@ -103,7 +103,6 @@ const OneMoreStep = () => {
                     </div>
                   </div>
                 }
-                needsDelay
               >
                 <span className='cursor-pointer text-text-accent-secondary'>{t('login.dontHave')}</span>
               </Tooltip>