1

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

ADIL TANVEER
  • 13
  • 2
  • did you try to give `position: relative` to the `.disabled-option` with an according `position: absolute` to the `.popup`? it will get rid of the overflowing problem puttin the popup out of the flow of the document – giosan Apr 04 '22 at 08:52
  • @giosan I tried that but it does not help as the enclosing `.options` has `overflow: auto` – ADIL TANVEER Apr 04 '22 at 11:03

1 Answers1

0

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.

GCnomore
  • 104
  • 2
  • 6
  • Seems like the approach will work. I modified my codepen with your approach. For now, there is some issue when the document is scrolled down and also the menu is scrolled but it should most probably require some minor fix I was wondering how this could be done with modern JS frameworks like React where touching the DOM directly is not recommended – ADIL TANVEER Apr 05 '22 at 08:02
  • Fixed the above issue. My codepen now has a working solution. Can you tell me how this would be applicable for modern JS frameworks like React as asked above ? – ADIL TANVEER Apr 05 '22 at 08:18
  • In React, you can use `useRef` hook and give that `ref` to your list item and use that `ref` to access the DOM features. It can be something like this: ```const listItemRef = useRef(); const {x, y} = listItemRef.current.getboundingclientrect();
  • ``` – GCnomore Apr 05 '22 at 16:24