1

I have a side navigation with the following styles

position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #11101D;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
overflow-x: visible;
overflow-y: scroll;

Which allows the user to scroll vertically on the side navigation.

When a user hovers on a navigation item, a tooltip appears to the right.

position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;

However, because of the overflow-y: scroll; on the parent, it doesn't overlap the sidebar, instead you scroll horizontally to see it, which isn't desired.

Current Tooltip

on hover on hover and vertical scroll

Desired Tooltip (with side nav scroll functionality)

tooltip visible with scroll

I have a JSFiddle with all the markup and styles.

I want the the side nav to be vertically scrollable while still having the functionality to view the tooltip.

Any help would be greatly appreciated. This is based on a React Application, so would prefer non JQuery solutions.

mcclosa
  • 943
  • 7
  • 29
  • 59

1 Answers1

1

Apparently, you can't, it's "written in the specs"

Source: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Source of the source: overflow-x: visible; doesn't work with overflow-y: auto; any workaround?

But you can wrap the menu in a container to split the overflows, the parent with overflow-x: auto and the child with overflow-y: scroll

savageGoat
  • 1,389
  • 1
  • 3
  • 10
  • I've tried to this but I still face the same issue that the tooltip doesn't appear as expected, perhaps I am going about this in the wrong way? Can you fork my JSFiddle with your solution? – mcclosa Feb 10 '22 at 20:52
  • @mcclosa looks like you are right, my bad. After trying multiple ways it seems that these two can't be combined, I'd suggest a JS lib like tippyJS -> example here: https://embed.plnkr.co/QYgxbD/ – savageGoat Feb 10 '22 at 23:11
  • 1
    I'll try out tippyJS I was actually in the middle of building a bespoke version of what tippyJS seems to do – mcclosa Feb 11 '22 at 03:46