feat(Form): FormItem add tooltip attributes (#7014)

* feat(Form): FormItem add tooltip attributes

* fix: Delete duplicate types

* fix: Remove excess slots and types

* Update FormItemLabel.tsx

---------

Co-authored-by: undefined <undefined>
Co-authored-by: tangjinzhou <415800467@qq.com>

Author: selicens

components/form/FormItem.tsx

@@ -126,6 +126,7 @@ export const formItemProps = () => ({
   messageVariables: { type: Object as PropType<Record<string, string>> },
   hidden: Boolean,
   noStyle: Boolean,
+  tooltip: String,
 });
 
 export type FormItemProps = Partial<ExtractPropTypes<ReturnType<typeof formItemProps>>>;
@@ -155,6 +156,7 @@ export default defineComponent({
     label: any;
     extra: any;
     default: any;
+    tooltip: any;
   }>,
   setup(props, { slots, attrs, expose }) {
     warning(props.prop === undefined, `\`prop\` is deprecated. Please use \`name\` instead.`);
@@ -505,7 +507,8 @@ export default defineComponent({
                     requiredMark={formContext.requiredMark.value}
                     prefixCls={prefixCls.value}
                     onClick={onLabelClick}
-                    label={props.label ?? slots.label?.()}
+                    label={props.label}
+                    v-slots={{ label: slots.label, tooltip: slots.tooltip }}
                   />
                   {/* Input Group */}
                   <FormItemInput

components/form/FormItemLabel.tsx

@@ -8,6 +8,8 @@ import defaultLocale from '../locale/en_US';
 import classNames from '../_util/classNames';
 import type { VueNode } from '../_util/type';
 import type { FunctionalComponent, HTMLAttributes } from 'vue';
+import Tooltip from '../tooltip';
+import QuestionCircleOutlined from '@ant-design/icons-vue/QuestionCircleOutlined';
 
 export interface FormItemLabelProps {
   colon?: boolean;
@@ -19,6 +21,7 @@ export interface FormItemLabelProps {
   required?: boolean;
   prefixCls: string;
   onClick: Function;
+  tooltip: string;
 }
 
 const FormItemLabel: FunctionalComponent<FormItemLabelProps> = (props, { slots, emit, attrs }) => {
@@ -59,12 +62,23 @@ const FormItemLabel: FunctionalComponent<FormItemLabelProps> = (props, { slots,
     labelChildren = (label as string).replace(/[:|：]\s*$/, '');
   }
 
-  labelChildren = (
-    <>
-      {labelChildren}
-      {slots.tooltip?.({ class: `${prefixCls}-item-tooltip` })}
-    </>
-  );
+  // Tooltip
+  if (props.tooltip || slots.tooltip) {
+    const tooltipNode = (
+      <span class={`${prefixCls}-item-tooltip`}>
+        <Tooltip title={props.tooltip}>
+          <QuestionCircleOutlined />
+        </Tooltip>
+      </span>
+    );
+
+    labelChildren = (
+      <>
+        {labelChildren}
+        {slots.tooltip ? slots.tooltip?.({ class: `${prefixCls}-item-tooltip` }) : tooltipNode}
+      </>
+    );
+  }
 
   // Add required mark if optional
   if (requiredMark === 'optional' && !required) {

components/form/index.en-US.md

@@ -87,6 +87,7 @@ A form consists of one or more form fields whose type includes input, textarea,
 | name | a key of `model`. In the use of validate and resetFields method, the attribute is required | [NamePath](#namepath) |  | 2.0.0 |
 | required | Whether provided or not, it will be generated by the validation rule. | boolean | false |  |
 | rules | validation rules of form | object \| array |  |  |
+| tooltip | Config tooltip info | string \| slot |  | 4.0.4 |
 | validateFirst | Whether stop validate on first rule of error for this field. | boolean | false |  |
 | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string |  |  |
 | validateTrigger | When to validate the value of children node | string \| string\[] | `change` |  |

components/form/index.zh-CN.md

@@ -88,6 +88,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 | name | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | [NamePath](#namepath) |  |  |
 | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |  |
 | rules | 表单验证规则 | object \| array |  |  |
+| tooltip | 配置提示信息 | string \| slot |  | 4.0.4 |
 | validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。 | boolean | false | 2.0.0 |
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string |  |  |
 | validateTrigger | 设置字段校验的时机 | string \| string\[] | `change` | 2.0.0 |