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
Desired Tooltip (with side nav scroll functionality)
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.