Cannot set overflow-x visible and overflow-y auto - html

Question

First of all, I know this question has been asked before. But I couldn't find the right solution for my case. That is why, I am posting it again.
So I am having a side bar
<div className="LeftMenu">
<div style={{position:relative"}}>
<div className= "icon-Back-office-icons_Logout1"}/>
<span className="tooltiptext">Name 1</span>
</div>
<div style={{position:relative"}}>
<div className= "icon-Back-office-icons_Logout2"}/>
<span className="tooltiptext">Name2</span>
</div>
</div>
.LeftMenu {
background-color: white; // box-shadow: 1px 2px 9px 0 rgba(92, 131, 205, 0.06);
display: flex;
align-items: center;
flex-direction: column;
padding-top: 24px;
padding-bottom: 25px;
height: 100%;
z-index: 100;
width: 100px;
position: fixed;
overflow-x: visible;
overflow-y:auto;
}
.tooltiptext:hover {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
The leftmenu div contains many children div. On hovering each child element a tool tip is displayed. A vertical scroll must be displayed if the length of children div increases. Hence I have given overflow-y auto. But the tooltip must be visible, and it has to overflow the leftmenu. Hence, I am giving overflow-x as visible.
But this doesn't work as I thought.
https://jsfiddle.net/jcj7k6kp/ Here is a jsfiddle that demonstrates my issue.

Answer 1

I don't think it's possible with only css. So here is a possible javascript solution (maybe you'll need to tweak some stuff to have px perfect centring ...):
const tooltips = Array.from(document.querySelectorAll('.tooltip'));
function displayTooltip(e) {
let tooltip = e.target;
let title = tooltip.getAttribute('data-title');
let tooltiptext = document.getElementById('tooltiptext');
let rect = tooltip.getBoundingClientRect();
let tooltipMargin = 14;
tooltiptext.innerHTML = title;
tooltiptext.style.top = rect.y + 'px';
tooltiptext.style.left = rect.x + rect.width + tooltipMargin + 'px';
tooltiptext.style.display = 'block';
}
function hideTooltip() {
let tooltiptext = document.getElementById('tooltiptext');
tooltiptext.style.display = 'none';
}
tooltips.forEach(function(t) {
t.addEventListener('mouseover', displayTooltip);
t.addEventListener('mouseout', hideTooltip);
});
.content {
height: 400px;
}
.LeftMenu {
width: 200px;
background-color: white;
box-shadow: 1px 0 0 0 #ebedf8, -6px 0 30px 0 rgba(42, 34, 64, 0.1);
display: flex;
align-items: center;
flex-direction: column;
padding-top: 24px;
padding-bottom: 25px;
position: fixed;
height: 100px;
z-index: 100;
overflow-x: hidden;
overflow-y: auto;
}
/*overflow-x and overflow-y isn't working as expected*/
/*overflow-x must be visible since I need the tooltip to be visible*/
/*overflow-y must be auto since I need to have a fixed height div and content must be scrollable if it doesnt't fit inside the fixed height*/
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltiptext {
position: absolute;
display: none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
z-index: 1000;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
<div class='tooltiptext' id='tooltiptext'>
</div>
<div class="LeftMenu">
<div class="tooltip" data-title="Tooltip text">
Hover over me
</div>
<div class="tooltip" data-title="Tooltip text 2">
Hover over me 2
</div>
<div class="tooltip" data-title="Tooltip text 3">
Hover over me 3
</div>
<div class="tooltip" data-title="Tooltip text 4">
Hover over me 4
</div>
<div class="tooltip" data-title="Tooltip text 5">
Hover over me 5
</div>
<div class="tooltip" data-title="Tooltip text 6">
Hover over me 6
</div>
<div class="tooltip" data-title="Tooltip text 7">
Hover over me 7
</div>
<div class="tooltip" data-title="Tooltip text 8">
Hover over me 8
</div>
</div>
and a jsfiddle