fix the tooltip in tools node (#8055)

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 import type { FC } from 'react'
-import { RiQuestionLine } from '@remixicon/react'
 import { ValidatingTip } from '../../key-validator/ValidateStatus'
 import type {
   CredentialFormSchema,
     onChange({ ...value, [key]: val, ...shouldClearVariable })
   }
 
-  // convert tooltip '\n' to <br />
-  const renderTooltipContent = (content: string) => {
-    return content.split('\n').map((line, index, array) => (
-      <Fragment key={index}>
-        {line}
-        {index < array.length - 1 && <br />}
-      </Fragment>
-    ))
-  }
-
   const renderField = (formSchema: CredentialFormSchema) => {
     const tooltip = formSchema.tooltip
     const tooltipContent = (tooltip && (
-      <span className='ml-1 pt-1.5'>
-        <Tooltip popupContent={
-          // w-[100px] caused problem
-          <div className=''>
-            {renderTooltipContent(tooltip[language] || tooltip.en_US)}
-          </div>
-        } >
-          <RiQuestionLine className='w-3 h-3  text-gray-500' />
-        </Tooltip>
+      <span className='ml-1'>
+        <Tooltip
+          popupContent={
+            <div className='w-[200px]'>
+              {tooltip[language] || tooltip.en_US}
+            </div>}
+          triggerClassName='w-4 h-4'
+        />
       </span>))
     if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput || formSchema.type === FormTypeEnum.textNumber) {
       const {
       const disabed = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
             {label[language] || label.en_US}
             {
               required && (
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
             {label[language] || label.en_US}
             {
               required && (
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
             {label[language] || label.en_US}
 
             {
         <div key={variable} className={cn(itemClassName, 'py-3')}>
           <div className='flex items-center justify-between py-2 text-sm text-gray-900'>
             <div className='flex items-center space-x-2'>
-              <span className={cn(fieldLabelClassName, 'py-2 text-sm text-gray-900')}>{label[language] || label.en_US}</span>
+              <span className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>{label[language] || label.en_US}</span>
               {
                 required && (
                   <span className='ml-1 text-red-500'>*</span>