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

Question

我想做什么？

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

问题：

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

参考文献：

1. 怎么办我在 CSS 中仅启用朝一个方向滚动？
2. 突破溢出：隐藏
3. CSS溢出-x： 可见的;和溢出-y：隐藏；导致滚动条问题

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

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

Answer 1

dom方法getBoundingClientRect将为您解决此问题。
此方法返回所选元素的位置，因此您无需将工具提示嵌套在菜单中。
制作一个包装器，该包装器将包含您的工具提示为body的直接子，然后将您从getBoundingClientRect提供放置。