将材料UI工具提示"on top"锚元素？(反应)

Question

似乎不可能将<Tooltip>放置在触发锚元素的"顶部"(堆叠/分层(

它总是出现在父对象之外，使用"placement"来决定位置。我相信Popper中的Flip工具可以管理放置并确保可见性。我已经尝试过通过Popper选项修改器来禁用翻转，并调整偏移。一些建议是跳过防止溢出，并禁用GPU加速我在MaterialUI内部的兔子洞里完成这件事我评论了一些似乎不太可能的过度使用的解决方案。

MUI外部的示例：react工具提示 (包括指针跟踪，超出此问题(

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

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