将 MUI 工具提示放置在容器内，使其不会溢出到容器之外

在此输入图像描述 https://i.stack.imgur.com/gKP8k.jpg

例如- 在此图像中，当我将鼠标悬停在左侧的按钮（单击）上时，工具提示将离开红色边框容器。

右侧按钮也会发生同样的情况。

我想动态更改工具提示位置，以便在这两种情况下它都保留在容器内。

p.s - stackoverflow 新手。如有不对请见谅。

提前致谢。

<Tooltip
  title=“aaa”
  arrow
  placement=“bottom”
 >
<button> click </button>
</Tooltip>

这是 MUI 工具提示的代码。我尝试寻找可以帮助我解决此问题的道具，但失败了。

您可以通过访问PopperProps in the Tooltip成分。

这方面的文档有点隐藏，但是Tooltip可以访问所有MUIPopper 组件属性 https://mui.com/material-ui/api/popper/，其中包含popperOptions。在 API 属性定义中Popper组件，MUI 会向您推荐 popper.js 文档。这些文档将告诉您如何申请PopperProps以获得不同的行为。查看popper.js.org https://popper.js.org/欲了解更多信息。

const boundingElement = useRef();
[...]
<div
  ref={boundingElement}
>
  <Tooltip
    title="Tooltip Tooltip Tooltip Tooltip Tooltip"
    PopperProps={{
      popperOptions: {
        modifiers: [
          {
             name: "preventOverflow",
             options: {
               boundary: boundingElement.current
             }
          }
        ]
      }
    }}
  >
    <div>Tooltip Hover Div</div>
  </Tooltip>
</div>

编辑：2023 年 9 月

有人指出，引用不会填充在初始渲染中，导致工具提示超出范围，直到执行另一次渲染为止。我解决这个问题的方法是在第一次渲染后使用forceUpdate https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdateReact 文档中的方法。它似乎正在工作（代码沙箱 https://codesandbox.io/s/tooltip-overflow-prevention-xq3pzs?file=/src/App.tsx）。如果有人有更好的方法在第一次渲染时定义参考，请编辑。

const boundingElement = useRef();
const [, forceUpdate] = useReducer(x => x + 1, 0);
  
useLayoutEffect(() => {
  forceUpdate()
}, [])

[...]

<div
  ref={boundingElement}
>
  <Tooltip
    title="Tooltip Tooltip Tooltip Tooltip Tooltip"
    PopperProps={{
      popperOptions: {
        modifiers: [
          {
             name: "preventOverflow",
             options: {
               boundary: boundingElement.current
             }
          }
        ]
      }
    }}
  >
    <div>Tooltip Hover Div</div>
  </Tooltip>
</div>