重复问题
- 我已搜索现有的问题
最新版本
- 我已测试了最新版本
重现步骤 🕹
链接到实时示例：
https://codesandbox.io/s/frosty-wave-8r1mqt?file=/demo.tsx
步骤：
- 打开沙箱链接，并最大化浏览器
- 将鼠标悬停在 "TOOLTIP" 上，然后工具提示出现
- 点击按钮，工具提示高度将扩展，然后工具提示在 "TOOLTIP" 的顶部 Flink 并关闭
当前行为 😯
点击按钮，工具提示高度将扩展，然后工具提示在 "TOOLTIP" 的顶部 Flink 并关闭
预期行为 🤔
首先，合理的是工具提示应该显示在元素的顶部，因为它的高度超过了视口，然而，它应该是可见的而不是 Flink 并突然关闭
上下文 🔦
在我的项目中，我的工具提示将显示一般消息和详细消息，详细消息默认是隐藏的，将在用户点击按钮时显示。
我在浏览器视口附近的情况下发现了这个问题。
你的环境 🌎
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
4条答案
按热度按时间pes8fvy91#
@ChouJoe 我无法始终重现你的问题，但你可能可以通过使用
placement属性(文档)来明确定位你的工具提示，从而避免这个问题。hgc7kmma2#
@ChouJoe 我无法始终重现你的问题，但你可能可以通过使用
placement属性(文档)来明确定位工具提示，从而避免这个问题。要重现这个问题，你需要最大化浏览器，以便代码沙盒中的工具提示示例会超出浏览器视口。这样就可以始终重现问题。此外，我尝试将其设置为“底部”，但定位不起作用。
qgelzfjb3#
当触发器和视口底部之间有足够的(垂直)空间容纳未展开的工具提示内容，但没有足够的空间容纳展开的内容时，它会重新生成。我认为这是由于在工具提示内容大小发生变化后，底层的popper重新定位自己，失去光标焦点，然后关闭。然而，这是Tooltip和popper的预期行为，而不是一个bug。
@ChouJoe,对于您的用例，如果您需要在视口底部附近有一个工具提示触发器，您可以使用
placement="top",这样工具提示就会显示在触发器上方，并有空间向上扩展。我认为这可能比可见的工具提示同时展开和移动的UX更好。或者，您可以使用
PopperProps和popperOptions像这样进一步自定义定位行为。(参见Tooltip和Popper文档)ebdffaop4#
上下文
因为在我们的上下文中，工具提示项位于一个可滚动的列表组件中，所以我们不能简单地定义
placement = top来解决这个问题，因为它可能会超过视口的顶部边界。我还尝试了
PopperProps和popperOptions来禁用工具提示的翻转，然而，这种方式下工具提示无法完全显示。总之，感谢帮助