重复问题
- 我已搜索现有的问题
最新版本
- 我已测试了最新版本
重现步骤 🕹
链接到实时示例:
https://mui.com/material-ui/react-tooltip/
步骤:
- 向下滚动到定位工具提示部分
- 点击“显示代码”
- 将 "top-start" 和 "top" 工具提示的
PopperProps={{ keepMounted: true, disablePortal: true }}
传递给相应的 Tooltip 组件。例如:
...
<Grid item>
<Tooltip title="Add" placement="top-start" PopperProps={{ keepMounted: true, disablePortal: true }}>
<Button>top-start</Button>
</Tooltip>
<Tooltip title="Add" placement="top" PopperProps={{ keepMounted: true, disablePortal: true }}>
<Button>top</Button>
</Tooltip>
<Tooltip title="Add" placement="top-end">
...
- 将鼠标悬停在顶部按钮上,并在顶部-开始和反之亦然的位置移动,以查看不规律的运动
当前行为 😯
当将鼠标从一个工具提示触发器移动到另一个时,当前工具提示会在消失之前移动位置,产生令人不适的视觉效果
28af10a68e15eff61eabde030fe7d7f2.mp4
预期行为 🤔
就像 PopperProps={{ keepMounted: true, disablePortal: true }}
没有添加到 Tooltip 组件时一样。也就是说,当鼠标悬停在不同的 Tooltip 触发器上时,工具提示会简单地淡出而不改变位置
1条答案
按热度按时间vuv7lop31#
对于任何遇到相同问题的人/正在处理此问题的人:
如果您在工具提示中添加一个小的leaveDelay,例如
leaveDelay={15}
,那么这个问题将不再存在。