如何让Popper始终显示在React MUI DataGrid上方并超出其边界？

问题描述 #

在使用MUI DataGrid Pro表格时，某一列的单元格内嵌入Tooltip组件，当Tooltip的Popper弹出时，会被表格边界截断，同时触发表格出现滚动条，导致Tooltip内容无法完整显示。

原代码 #

const StatusMessageTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    whiteSpace: 'normal',
  },
});

return (
  <>
    {params.value}
    {isFailed && (
      <StatusMessageTooltip
        PopperProps={{
          disablePortal: true,
          style: { zIndex: 99999999 },            
        }}
        title={'Popper Text here'}
        placement="left"
        componentsProps={{
          popper: {
            modifiers: [
              {
                name: 'preventOverflow',
                enabled: false,
              },
            ],
          },
        }}
      >
        <HelpIcon fontSize="small" style={{ marginLeft: 10 }} />
      </StatusMessageTooltip>
    )}
  </>
);

解决方案 #

核心问题分析 #

你设置了PopperProps={{ disablePortal: true }}，该属性会强制Popper渲染在当前组件的DOM层级内，而DataGrid的单元格或容器默认带有overflow: auto/hidden样式，导致Popper被容器截断。

修改步骤 #

1. 移除disablePortal: true：让Popper通过React Portal渲染到DOM根节点（通常是body），脱离DataGrid的容器限制。
2. 配置Popper修饰符：启用preventOverflow并设置以视口为边界，同时添加flip修饰符确保Popper在空间不足时自动切换位置。
3. 合理设置zIndex：无需使用极端数值，确保Tooltip层级高于DataGrid即可。

修改后的代码 #

import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
import { styled } from '@mui/material/styles';
import HelpIcon from '@mui/icons-material/Help';

const StatusMessageTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    whiteSpace: 'normal',
    maxWidth: 300, // 可选：限制Tooltip最大宽度，避免内容过宽
  },
});

return (
  <>
    {params.value}
    {isFailed && (
      <StatusMessageTooltip
        title={'Popper Text here'}
        placement="left"
        PopperProps={{
          style: { zIndex: 9999 }, // 确保层级高于DataGrid
          modifiers: [
            {
              name: 'preventOverflow',
              options: {
                boundariesElement: 'viewport', // 以视口作为边界，避免被容器截断
              },
            },
            {
              name: 'flip',
              options: {
                fallbackPlacements: ['right', 'top', 'bottom'], // 左侧空间不足时自动切换位置
              },
            },
          ],
        }}
      >
        <HelpIcon fontSize="small" style={{ marginLeft: 10 }} />
      </StatusMessageTooltip>
    )}
  </>
);

额外注意事项 #

• 如果DataGrid本身设置了自定义zIndex，需确保Tooltip的zIndex大于该值。
• 若问题仍存在，检查DataGrid的父容器是否带有overflow: hidden或position: relative，必要时可给父容器添加overflow: visible（需注意对整体布局的影响）。

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