antd 表单项上带有工具提示的图标答案

【问题标题】：Icon with tooltip on antd form itemantd 表单项上带有工具提示的图标
【发布时间】：2021-05-06 10:53:45
【问题描述】：

我正在使用 Antd 表单项，我必须放置一个带有工具提示的图标，如下所示：

这是我的代码：

 <Item label={'Password'} name={'password'} className={'password'} rules={[{ required: true, message: t('Feld ist erforderlich') }]}>
            <Password size="large" />
            <PasswordStrength password={password} />
 </Item>

有什么想法吗？请帮忙！谢谢！

【问题讨论】：

您的问题是什么？一定是您想在输入上方添加工具提示吗？ Antd 中的 item 有属性是一个工具提示，你可以在文档中看到：ant.design/components/form/#components-form-demo-required-mark
label旁边的这个tooltip，可以自定义Ant的CSS
工具提示属性无法识别:(
你用的是最新的升级版Antd吗？

标签： css reactjs antd

【解决方案1】：

我遇到了同样的问题并通过以下解决方案解决：

我没有为 Form.Item 设置 label 属性，然后在 Form Item 顶部添加一个 Row，包括标签和工具提示图标

    <Row justify="space-between">
      <Col>
        <span>Mật Khẩu</span>
      </Col>
      <Col>
        <Tooltip title='tooltip text'>
            <ExclamationCircleOutlined />
        </Tooltip>
      </Col>
    </Row>
     <Form.Item>
       <Input.Password />
     </Form.Item>

【讨论】：

【解决方案2】：

解决方案1：你可以在表单项中自定义标签，按照我的代码

<Item
    label={
      <div>
        Label a{" "}
        <Tooltip title="Tooltip with customize">
          <InfoCircleOutlined />
        </Tooltip>
      </div>
    }
  >
    <Input placeholder="input placeholder" />
  </Item>

方案二：升级新版本的Antd，使用属性提示

希望对你有用。

【讨论】：

如果我应用第一个解决方案，我会得到这样的结果，这不是预期的：密码@：*，图标不在正确的位置
你可以选择其他图标