将 MaterialUI Tooltip 放置在锚元素的“顶部”？（反应）答案

【问题标题】：Place MaterialUI Tooltip "on top" of anchor element? (React)将 MaterialUI Tooltip 放置在锚元素的“顶部”？（反应）
【发布时间】：2023-03-20 09:21:01
【问题描述】：

似乎不可能将`<Tooltip>`“放在顶部”（堆叠/分层）触发锚元素。

它总是出现在父级之外，使用"placement" 来决定在哪里。我相信是 Popper 中的 Flip 工具管理放置并确保可见性。我尝试通过 Popper 选项修饰符来禁用翻转，并调整偏移量。一些建议是跳过防止溢出，并禁用 GPU 加速。 为了实现这一点，我在 MaterialUI 内部陷入了困境。 我评论了似乎不太可能过度杀伤的解决方案。

MUI 外部示例：react-tooltip （包括指针跟踪，超出这个问题）。

<Tooltip title="My Label" placement="top" PopperProps={{
  popperOptions: {
    modifiers: {
      flip: { enabled: false },
      // computeStyle: {
      //   gpuAcceleration: false
      // },
      // preventOverflow: {
      //   enabled: false,
      //   padding: 0
      // },
      offset: {
        offset: '-20px -20px'
      }
    }
  }
}}></Tooltip>
    <h3>My Text</h3>
</Tooltip>

【问题讨论】：

你能添加一张应该是什么解决方案的图片吗？我不确定我是否遵循您想要实现的目标。
我还没有视觉效果，我已经更新了描述以更清晰。 MUI 强制工具提示在锚元素之外。

标签： material-ui tooltip popper.js react-material react-popper

【解决方案1】：

您需要像这样启用偏移量：

<Tooltip title="My Label" placement="top" PopperProps={{
  popperOptions: {
    modifiers: {
      flip: { enabled: false },
      offset: {
        enabled: true,
        offset: '0px -60px'
      }
    }
  }
}}>
    <h3>My Text</h3>
</Tooltip>

这将使您能够将工具提示放在顶部

【讨论】：

我很有希望，但这不起作用 ...工具提示仍然不允许在触发元素上分层。我在 MUI 之外添加了一个示例。
让我检查一下，它对我有用，我会创建一个沙箱来告诉你我做了什么
我的错，它使用晶圆厂工作：codesandbox.io/s/material-demo-yv8d4?file=/demo.js。它在使用绝对位置时也可以工作，但要在正确的位置上做更多的工作
不错。我将 PopperProps 添加到第一个示例中，这也有效。 OMG，两个可行的选择！！！如果你稍微修改你的答案，我可以投票。
@doublejosh 但我们仍然不知道如何让它与 h3 之类的东西一起工作，你最初的问题是关于这个的，还是你也设法让它工作？

似乎不可能将&lt;Tooltip&gt;“放在顶部”（堆叠/分层）触发锚元素。

似乎不可能将`<Tooltip>`“放在顶部”（堆叠/分层）触发锚元素。