How to overflow content in one direction for a custom Menu?

Question

What I am trying to do ?

1. I have a custom Menu in my app with some options (say 8 options)
2. Based on some logic I need to disable some options in the menu (say last 4 options)
3. If the user hovers over any disabled option, I need to show a popup explaining why the option was disabled

Issue :

• Since the number of options in the menu are not known before-hand, the menu should be scrollable to accommodate for more options (if required)
• However, the popup upon hovering on a disabled option should overflow the menu boundaries (if required)
• This basically boils down to having overflow-x: visible and overflow-y: auto which is not possible as per the specs
• Some of the posts that I referred use absolute positioning to get around this issue but that does not seem to help here

References :

1. How do I enable scrolling only in one direction in CSS?
2. Break out of overflow:hidden
3. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

I tried to create my dummy custom menu that reproduces the issue : https://codepen.io/adiltan/pen/BaJJzOb

I have tried using absolute positioning but I could not get it to work

Answer 1

A DOM method getboundingclientrect will solve this for you.
This method returns selected element's placement so you don't need to nest the tooltip inside your menu.
Make a wrapper that will contain your tooltips as direct child of body and give them placement you got from getboundingclientrect.