[material-ui][Tooltip] Multiple tooltip sporadic repositioning with disablePortal and keepMounted true

zpqajqem  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(48)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

链接到实时示例:
https://mui.com/material-ui/react-tooltip/
步骤:

  1. 向下滚动到定位工具提示部分
  2. 点击“显示代码”
  3. 将 "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">
...
  1. 将鼠标悬停在顶部按钮上,并在顶部-开始和反之亦然的位置移动,以查看不规律的运动

当前行为 😯

当将鼠标从一个工具提示触发器移动到另一个时,当前工具提示会在消失之前移动位置,产生令人不适的视觉效果
28af10a68e15eff61eabde030fe7d7f2.mp4

预期行为 🤔

就像 PopperProps={{ keepMounted: true, disablePortal: true }} 没有添加到 Tooltip 组件时一样。也就是说,当鼠标悬停在不同的 Tooltip 触发器上时,工具提示会简单地淡出而不改变位置

vuv7lop3

vuv7lop31#

对于任何遇到相同问题的人/正在处理此问题的人:
如果您在工具提示中添加一个小的leaveDelay,例如leaveDelay={15},那么这个问题将不再存在。

相关问题