Icon with tooltip on antd form item

user_12914623 0
Viewed 3400

I am working with Antd Form Item and I have to put an icon with tooltip like this: enter image description here

And here is my code:

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

Any idea? Please help! Thank you!

antd reactjs css
2 Answers

Solution 1: You can custom label in Form item, follow my code

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

Solution 2: you can upgrade new version Antd, and use property tooltip

I hope it useful for you.

user_150813460

enter image description here

I got same problem and work around by below solution:

I don't set label attribute for Form.Item, then add a Row on top of Form Item including label and tooltip icon

    <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>
user_166760010
Related