diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 1f8a1eb2ef..29dc9f09a7 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -126,6 +126,7 @@ export const formItemProps = () => ({ messageVariables: { type: Object as PropType> }, hidden: Boolean, noStyle: Boolean, + tooltip: String, }); export type FormItemProps = Partial>>; @@ -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 */} = (props, { slots, emit, attrs }) => { @@ -59,12 +62,23 @@ const FormItemLabel: FunctionalComponent = (props, { slots, labelChildren = (label as string).replace(/[:|:]\s*$/, ''); } - labelChildren = ( - <> - {labelChildren} - {slots.tooltip?.({ class: `${prefixCls}-item-tooltip` })} - - ); + // Tooltip + if (props.tooltip || slots.tooltip) { + const tooltipNode = ( + + + + + + ); + + labelChildren = ( + <> + {labelChildren} + {slots.tooltip ? slots.tooltip?.({ class: `${prefixCls}-item-tooltip` }) : tooltipNode} + + ); + } // Add required mark if optional if (requiredMark === 'optional' && !required) { diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 14c7c68cb3..26dc4fe449 100644 --- a/components/form/index.en-US.md +++ b/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` | | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 273887eb3a..bf6e749194 100644 --- a/components/form/index.zh-CN.md +++ b/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 |