在react和antd下,用form.item包裹一个radio.group,并在该项旁边加一个问号图标 鼠标移上去可显示提示信息
时间: 2024-02-24 13:56:29 浏览: 250
可以使用Ant Design中的Tooltip组件来实现这一功能。首先,你需要在`<Form.Item>`组件中包裹`<Radio.Group>`组件,并在`<Form.Item>`组件的`label`属性中设置该项的标签名。接下来,在该项旁边添加一个`<Tooltip>`组件,将提示信息放入`<Tooltip>`组件的`title`属性中。最后,将`<Radio.Group>`组件的`name`属性设置为该项的标签名,以便表单提交时能够正确获取该项的值。
下面是一个示例代码:
```
import { Form, Radio, Tooltip } from 'antd';
<Form>
<Form.Item label="性别" name="gender">
<Radio.Group name="性别">
<Radio value="male">男</Radio>
<Radio value="female">女</Radio>
</Radio.Group>
<Tooltip title="请选择您的性别">
<QuestionCircleOutlined />
</Tooltip>
</Form.Item>
</Form>
```
在上面的示例代码中,`<Form.Item>`组件中的`label`属性设置为“性别”,`<Radio.Group>`组件的`name`属性设置为“性别”,并且在该项旁边添加了一个`<Tooltip>`组件,其中提示信息为“请选择您的性别”。当鼠标移动到问号图标上时,将会显示该提示信息。
阅读全文