Material UI Tooltip 自定义翻转行为实现方案咨询

Material UI 的 Tooltip 底层依赖 Popper.js 实现定位、翻转逻辑，无需自行重写底层能力，直接通过组件自带的 PopperProps 传入配置即可自定义翻转规则：

核心配置说明 #

• 关闭默认自动翻转：找到 modifiers 数组中名为 flip 的修饰器，将其 enabled 属性设为 false，Tooltip 就会固定在你设置的 placement 位置，不会因为溢出视口自动翻转。
• 自定义允许翻转的方向：不需要完全关闭翻转的情况下，可以给 flip 修饰器的 allowedAutoPlacements 传入允许的位置数组，比如只允许上下翻转就传 ['top', 'bottom']，Tooltip 溢出时只会在你指定的位置范围内调整，不会跑到左右两侧。
• 调整翻转触发阈值：修改 flip 修饰器的 padding 字段，可以设置 Tooltip 距离视口边界多少像素时触发翻转，默认值为8px。
• 自定义边界容器：如果你的应用布局有固定的滚动容器，不是基于整个视口定位，可以给 flip 修饰器配置 rootBoundary 字段指定边界容器，让翻转规则基于你指定的容器计算。

示例代码 #

import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';

export default function App() {
  return (
    <Tooltip
      title="自定义翻转规则的提示框"
      placement="bottom"
      PopperProps={{
        modifiers: [
          {
            name: 'flip',
            options: {
              // 仅允许上下方向翻转
              allowedAutoPlacements: ['top', 'bottom'],
              // 距离边界12px时触发翻转
              padding: 12
            }
          }
        ]
      }}
    >
      <Button variant="contained">悬浮查看提示</Button>
    </Tooltip>
  );
}

进阶自定义场景 #

如果内置的翻转规则完全无法满足你的需求，可以先把 flip 修饰器的 enabled 设为 false 关闭默认翻转，自行监听容器滚动、窗口 resize 事件，根据元素实时位置动态修改 placement 属性，实现完全自定义的翻转逻辑。

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