单击图像后，数字将作为tooltip消息显示4秒钟，然后消失。这按预期工作。但是在显示工具提示时，div高度和宽度发生了变化。我们如何在图片顶部显示工具提示而不影响图片的高度/宽度grid-container
我在这里添加了一个演示：
https://codesandbox.io/s/amazing-ellis-2h3pd?file=/src/components/Home.js
第一个解决方案
您可以设置position: absolute并应用必要的边距，使其出现在图像顶部
{phoneTooltip === id && (
<div style={{position: 'absolute', marginLeft: '100px', zIndex: 1, marginTop: '-50px'}}
className="tooltip_PhoneNumber_home" key={phonenumber}>
{phonenumber}
</div>
)}
第二解决方案
重构jsx，使工具提示始终位于图像顶部，但带有visibility: hidden，opacity: 0单击操作使其可见。
<span className="phoneNumber_home">
<div style={{opacity: phoneTooltip === id ? 1 : 0}} className="tooltip_PhoneNumber_home" key={phonenumber}>
{phonenumber}
</div>
<img
src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png"
alt={"phoneTooltip.show"}
key={id}
name="phoneNumberhomeicon"
onClick={displayPhoneToolTip(id)}/>
</span>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句