Improve Tooltip UX by enabling delay by default

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx

@@ -44,7 +44,7 @@
 }
 
 const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
   const [isShowTips, { toggle: toggleTips, set: setShowTips }] = useBoolean(!isMobile)
   const { t } = useTranslation()
   const docLink = useDocLink()
 
@@ -62,7 +62,6 @@
           <Tooltip
             position='right'
             noDecoration
-            needsDelay
             popupContent={
               <LinkedAppsPanel
                 relatedApps={relatedApps.data}
@@ -87,7 +86,6 @@
       <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'>

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

@@ -176,7 +176,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>
@@ -199,7 +198,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]' />
@@ -226,7 +224,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)

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}

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!)

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)

web/app/components/datasets/documents/list.tsx

@@ -152,7 +152,6 @@ export const StatusItem: FC<{
           <Tooltip
             popupContent={t('datasetDocuments.list.action.enableWarning')}
             popupClassName='text-text-secondary system-xs-medium'
-            needsDelay
             disabled={!archived}
           >
             <Switch
@@ -274,7 +273,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' />

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'

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>

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>

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

web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx

@@ -92,7 +92,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>

web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx

@@ -149,7 +149,6 @@ const ToolItem = ({
       {isError && (
         <Tooltip
           popupContent={errorTip}
-          needsDelay
         >
           <div>
             <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />

web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx

@@ -48,7 +48,6 @@ const NotFoundWarn = (props: {
         </p>
       </div>
     }
-    needsDelay
   >
     <div>
       <RiErrorWarningFill className='size-4 text-text-destructive' />

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' />

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>