滚动时Tooltip偏移问题及hover按钮禁用滚动方案咨询

我网站里的按钮配置了操作说明Tooltip，但遇到个Bug：hover图标时Tooltip正常显示，此时滚动表格，Tooltip会偏移出边界。操作步骤：hover第一列任意单元格，Tooltip出现后滚动鼠标滚轮，就能看到Tooltip跑到表格外面。之前试过其他解决方案，但集成到实际代码里问题很多，所以想实现hover按钮时禁用滚动的效果（注：不使用position: fixed方案）。

实现思路 #

利用Tooltip的onOpen和onClose事件，在Tooltip显示时给表格容器添加禁止滚动的样式，隐藏时移除该样式，从而避免滚动导致的Tooltip偏移。

代码实现 #

1. 先给表格容器添加禁止滚动的CSS类：

.table-container.no-scroll {
  overflow: hidden;
}

2. 修改Tooltip组件，添加事件处理逻辑：

import { useRef } from 'react';
import Tooltip from '@mui/material/Tooltip';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';

const YourComponent = () => {
  // 获取表格容器的DOM引用
  const tableContainerRef = useRef(null);

  // 打开Tooltip时禁用表格滚动
  const handleTooltipOpen = () => {
    if (tableContainerRef.current) {
      tableContainerRef.current.classList.add('no-scroll');
    }
  };

  // 关闭Tooltip时恢复表格滚动
  const handleTooltipClose = () => {
    if (tableContainerRef.current) {
      tableContainerRef.current.classList.remove('no-scroll');
    }
  };

  return (
    {/* 假设这是你的表格容器 */}
    <div ref={tableContainerRef} className="table-container">
      {/* 表格内容 */}
      <div>
        <Tooltip 
          title="Delete" 
          arrow
          onOpen={handleTooltipOpen}
          onClose={handleTooltipClose}
          componentsProps={{
            tooltip: {
                sx: {
                    bgcolor: '#a3a3a3',
                    '& .MuiTooltip-arrow': {
                        color: '#a3a3a3',
                    },
                },
              },
            }}
          PopperProps={{
              modifiers: [
                  {
                      name: "offset",
                      options: {
                          offset: [0, -8],
                      },
                  },
              ],
          }}>
          <DeleteForeverIcon/>
        </Tooltip>
      </div>
    </div>
  );
};

export default YourComponent;

关键说明 #

• 通过onOpen和onClose钩子精准控制表格滚动的禁用与恢复；
• 仅在Tooltip显示时限制滚动，不影响其他场景的正常交互；
• 无需改动Tooltip的定位逻辑，完全避开position: fixed方案。

内容的提问来源于stack exchange，提问作者Paul