如何在自定义菜单的一个方向上溢出内容？

Question

我想做什么？

1. 我的应用程序中有一个自定义菜单，其中包含一些选项（比如 8 个选项）
2. 根据某些逻辑，我需要禁用菜单中的某些选项（比如最后 4 个选项）
3. 如果用户将鼠标悬停在任何已禁用的选项上，我需要显示一个弹出窗口来解释该选项被禁用的原因

问题：

• 由于事先不知道菜单中的选项数量，因此菜单应该是可滚动的以容纳更多选项（如果需要）
• 但是，将鼠标悬停在禁用选项上时的弹出窗口应该会溢出菜单边界（如果需要）
• 这基本上可以归结为具有 overflow-x: visible 和 overflow-y: auto，这在规范中是不可能的
• 我提到的一些帖子使用绝对定位来解决这个问题，但这似乎对这里没有帮助

参考资料：

2. Break out of overflow:hidden
3. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

我尝试创建重现该问题的虚拟自定义菜单：https://codepen.io/adiltan/pen/BaJJzOb

我尝试过使用绝对定位，但无法正常工作

Answer 1

一个DOM方法getboundingclientrect会为你解决这个问题。
此方法 returns 选择了元素的位置，因此您无需将工具提示嵌套在菜单中。
制作一个包装器，将包含您的工具提示作为 body 的直接子项，并为它们提供您从 getboundingclientrect.

获得的位置