1

似乎不可能将<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>
4

1 回答 1

1

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

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

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

于 2020-04-10T18:38:33.303 回答