场景:表单内提示信息框,放图片进去
需求:提示框变大使图片展示更清晰
image.png
在title属性里面可以放字符串文字,也可以放组件,但是需要用小括号包起来 否则不会生效
<Form.Item
label="关联推荐位"
name="has_recommend"
tooltip={{
title: (
<Image src="https://static.tingshubao.net/bbg_fe/pichu/1618392076785.jpg" />
),
color: 'red',
placement: 'rightTop',
}}
>
将图片放大,在外面套盒子,改变提示框的大小 但是都没用
image.png
最后查阅资料 debug 发现有一个最大宽度 maxWidth:200 所以不管设置多大 都只有200
于是修改代码
<Form.Item
label="关联推荐位"
name="has_recommend"
tooltip={{
title: (
<Image src="https://static.tingshubao.net/bbg_fe/pichu/1618392076785.jpg" />
),
color: 'red',
placement: 'rightTop',
overlayStyle: { maxWidth: 600 },
}}
/>
image.png
****注意:不用修改图片的宽度 直接修改最大宽度 图片会根据值自适应 相应放大比例