From 2084f08786111f0a35e8d8a3a90a607e5367e117 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Fri, 1 May 2026 02:46:02 +0800
Subject: [PATCH] chore: tooltip to infotip

---
 .../model-provider-page/model-modal/Form.tsx  | 37 ++++++++++---------
 .../model-modal/__tests__/Form.spec.tsx       |  4 ++
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index 8f8313eb24..b1c6b91e9d 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -15,9 +15,9 @@ import type {
 import { cn } from '@langgenius/dify-ui/cn'
 import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@langgenius/dify-ui/select'
 import { useCallback, useState } from 'react'
+import { Infotip } from '@/app/components/base/infotip'
 import Radio from '@/app/components/base/radio'
 import RadioE from '@/app/components/base/radio/ui'
-import Tooltip from '@/app/components/base/tooltip'
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
 import MultipleToolSelector from '@/app/components/plugins/plugin-detail-panel/multiple-tool-selector'
@@ -43,6 +43,8 @@ const radioGridColumnsClassNames: Record<number, string> = {
   12: 'grid-cols-12',
 }
 
+type ModelSelectorValue = Record<string, unknown>
+
 type FormProps<
   CustomFormSchema extends Omit<CredentialFormSchema, 'type'> & { type: string } = never,
 > = {
@@ -115,7 +117,7 @@ function Form<
     fieldMoreInfo,
   }
 
-  const handleFormChange = (key: string, val: string | boolean) => {
+  const handleFormChange = (key: string, val: FormValue[string]) => {
     if (isEditMode && (key === '__model_type' || key === '__model_name'))
       return
 
@@ -130,7 +132,7 @@ function Form<
     onChange({ ...value, [key]: val, ...shouldClearVariable })
   }
 
-  const handleModelChanged = useCallback((key: string, model: any) => {
+  const handleModelChanged = useCallback((key: string, model: ModelSelectorValue) => {
     const newValue = {
       ...value[key],
       ...model,
@@ -141,16 +143,15 @@ function Form<
 
   const renderField = (formSchema: CredentialFormSchema | CustomFormSchema) => {
     const tooltip = formSchema.tooltip
-    const tooltipContent = (tooltip && (
-      <Tooltip
-        popupContent={(
-          <div className="w-[200px]">
-            {tooltip[language] || tooltip.en_US}
-          </div>
-        )}
-        triggerClassName="ml-1 w-4 h-4"
-        asChild={false}
-      />
+    const tooltipText = tooltip?.[language] || tooltip?.en_US
+    const tooltipContent = (tooltipText && (
+      <Infotip
+        aria-label={tooltipText}
+        className="ml-1"
+        popupClassName="w-[200px] max-w-[200px]"
+      >
+        {tooltipText}
+      </Infotip>
     ))
     if (override) {
       const [overrideTypes, overrideRender] = override
@@ -407,8 +408,8 @@ function Form<
             disabled={readonly}
             value={value[variable]}
             // selectedTools={value[variable] ? [value[variable]] : []}
-            onSelect={item => handleFormChange(variable, item as any)}
-            onDelete={() => handleFormChange(variable, null as any)}
+            onSelect={item => handleFormChange(variable, item)}
+            onDelete={() => handleFormChange(variable, null)}
           />
           {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}
@@ -437,7 +438,7 @@ function Form<
             required={required}
             tooltip={tooltip?.[language] || tooltip?.en_US}
             value={value[variable] || []}
-            onChange={item => handleFormChange(variable, item as any)}
+            onChange={item => handleFormChange(variable, item)}
             supportCollapse
           />
           {fieldMoreInfo?.(formSchema)}
@@ -467,7 +468,7 @@ function Form<
             disabled={readonly}
             scope={scope}
             value={value[variable]}
-            onSelect={item => handleFormChange(variable, { ...item, type: FormTypeEnum.appSelector } as any)}
+            onSelect={item => handleFormChange(variable, { ...item, type: FormTypeEnum.appSelector })}
           />
           {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}
@@ -498,7 +499,7 @@ function Form<
             isShowNodeName
             nodeId={nodeId || ''}
             value={value[variable] || []}
-            onChange={item => handleFormChange(variable, item as any)}
+            onChange={item => handleFormChange(variable, item)}
             filterVar={(varPayload) => {
               if (!scope)
                 return true
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/Form.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/Form.spec.tsx
index b9df3ec9c3..a71cddcd24 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/Form.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/Form.spec.tsx
@@ -1235,6 +1235,10 @@ describe('Form', () => {
       expect(screen.getByText('Region'))!.toBeInTheDocument()
       expect(screen.getByText('Model'))!.toBeInTheDocument()
       expect(screen.getByText('Agree'))!.toBeInTheDocument()
+      expect(screen.getByLabelText('Enter your API key here'))!.toBeInTheDocument()
+      expect(screen.getByLabelText('Select region'))!.toBeInTheDocument()
+      expect(screen.getByLabelText('Choose model'))!.toBeInTheDocument()
+      expect(screen.getByLabelText('Agree tooltip'))!.toBeInTheDocument()
     })
 
     it('should render required asterisk for radio, select, checkbox, and other field types', () => {