如何让MUI Tooltip在容器内动态调整位置以避免溢出？

要让Tooltip始终处于红色边框容器内部，核心是利用MUI Tooltip的PopperProps配置popper.js的位置约束规则，通过preventOverflow和flip两个modifiers来动态调整Tooltip位置。

修改后的代码示例 #

import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';
import { useRef } from 'react';

export default function ConstrainedTooltip() {
  // 指向你的红色边框容器
  const containerRef = useRef(null);

  return (
    {/* 容器需设置position: relative，确保popper计算位置正确 */}
    <div 
      ref={containerRef} 
      style={{ 
        border: '2px solid red', 
        padding: '20px', 
        position: 'relative', 
        width: '300px', 
        height: '200px' 
      }}
    >
      <Tooltip
        title="aaa"
        arrow
        placement="bottom"
        PopperProps={{
          modifiers: [
            {
              name: 'preventOverflow',
              options: {
                // 将Tooltip约束到容器内部
                boundary: containerRef.current,
                // 同时约束X、Y轴方向的溢出
                altAxis: true,
              },
            },
            {
              name: 'flip',
              options: {
                boundary: containerRef.current,
                // 当bottom位置不足时，自动切换到这些备选位置
                fallbackPlacements: ['top', 'left', 'right'],
              },
            },
          ],
        }}
      >
        <Button>click</Button>
      </Tooltip>

      {/* 容器边缘的测试按钮 */}
      <Tooltip
        title="bbb"
        arrow
        placement="bottom"
        PopperProps={{
          modifiers: [
            {
              name: 'preventOverflow',
              options: {
                boundary: containerRef.current,
                altAxis: true,
              },
            },
            {
              name: 'flip',
              options: {
                boundary: containerRef.current,
                fallbackPlacements: ['top', 'left', 'right'],
              },
            },
          ],
        }}
        style={{ position: 'absolute', bottom: '10px', right: '10px' }}
      >
        <Button>edge button</Button>
      </Tooltip>
    </div>
  );
}

关键配置说明 #

• containerRef：通过ref获取红色边框容器的DOM元素，作为Tooltip的约束边界，确保popper能准确计算容器范围。
• preventOverflow modifier：强制Tooltip不会超出指定容器的边界，altAxis: true表示同时限制水平和垂直方向的溢出。
• flip modifier：当你设置的placement（比如示例中的bottom）没有足够空间显示Tooltip时，会自动从fallbackPlacements列表中选择合适的位置，保证Tooltip始终可见且在容器内。
• 容器样式要求：必须给红色边框容器设置position: relative，否则popper会基于整个文档计算位置，无法正确约束。

如果是点击触发的Tooltip（比如通过open状态控制显示），同样可以复用上述PopperProps配置，逻辑完全通用。

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