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

Question

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

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

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

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

提前致谢。

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

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

Answer 1

您可以通过访问

PopperProps

组件中的

Tooltip

来完成此操作。

这方面的文档有点隐蔽，但是

Tooltip

可以访问所有 MUI

Popper

组件属性，其中包含

popperOptions

。在

Popper

组件的 API 属性定义中，MUI 会向您推荐 popper.js 文档。然后，这些文档将告诉您如何应用

PopperProps

来获得不同的行为。请访问 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 月

有人指出，引用不会填充在初始渲染中，导致工具提示超出范围，直到执行另一次渲染为止。我解决此问题的方法是使用 React 文档中的

forceUpdate

方法在第一次渲染后强制更新。它似乎正在工作（CodeSandbox）。如果有人有更好的方法在第一次渲染时定义参考，请编辑。

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>