将MaterialUI工具提示“放在顶部"锚元素? (反应) [英] Place MaterialUI Tooltip "on top" of anchor element? (React)

问题描述

它总是出现在父级外部，使用"placement"来确定位置.我相信这是Popper中的 Flip 工具，用于管理展示位置并确保可见性.我尝试传递Popper选项修饰符以禁用翻转，并调整偏移量.一些建议是跳过防止溢出，并禁用GPU加速. 我正在用MaterialUI内部组件来解决这个问题.我评论了似乎不太可能的过度杀伤解决方案.

It always appears outside the parent, using "placement" to decide where. I believe it's the Flip tool within Popper that manages placement and ensures visibility. I've tried passing Popper option modifiers to disable flip, and adjusting the offset. Some recommendations were to skip preventing overflow, and disable GPU acceleration. I'm down a rabbit-hole of MaterialUI internals to accomplish this. I commented out what seems like unlikely overkill solutions.

MUI以外的示例:反应工具提示 (除了此问题外，还包括指针跟踪).

Example outside MUI: react-tooltip (includes pointer tracking, beyond this question).

<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>

推荐答案

您需要启用以下偏移量:

You need to enable the offset like this:

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

这将使您可以将工具提示放在顶部

this will enable you to place the tooltip on top

这篇关于将MaterialUI工具提示“放在顶部"锚元素? (反应)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！