放置锚元素的 MaterialUI 工具提示 "on top"？（反应）

Question

似乎无法放置 `<Tooltip>` "on top"（stacked/layered 以上）触发锚元素。

它总是出现在父级之外，使用 "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>

Answer 1

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

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

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

放置锚元素的 MaterialUI 工具提示 "on top"？（反应）

Place MaterialUI Tooltip "on top" of anchor element? (React)

tooltip

material-ui

popper.js

react-material

react-popper

似乎无法放置 `<Tooltip>` "on top"（stacked/layered 以上）触发锚元素。

放置锚元素的 MaterialUI 工具提示 "on top"？ （反应）

Place MaterialUI Tooltip "on top" of anchor element? (React)

tooltip

material-ui

popper.js

react-material

react-popper

似乎无法放置 <Tooltip> "on top"（stacked/layered 以上）触发锚元素。

放置锚元素的 MaterialUI 工具提示 "on top"？（反应）

似乎无法放置 `<Tooltip>` "on top"（stacked/layered 以上）触发锚元素。