How to escape overflow: hidden with only one element?-CodePudding

Before you mark this as duplicate, read this: I have a menu (container) with an absolute position, the overflow-y is set to scroll, and overflow-x is hidden. I also have tooltips when you hover on parts of the menu, and some of them overflow beyond the menu. For some reason the tooltips will never display beyond the container, and i have tried position absolute, and z-index, and even overflow-x:visible. None of this works. For example:

CSS:

.menu {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: gray;
  overflow-y: scroll;
  overflow-x: visible;
}

.tooltip {
  position: absolute;
  left: -5px;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: black;
}

<div class='menu'>
  <div class='tooltip'></div>
</div>

.tooltip {
position:absolute;
left:-5px;
top:0;
width:10px;
height:10px;
background-color:black;
}

HTML:

<div class='menu'>
<div class='tooltip'></div>
</div>

and the tooltip div wont ever display beyond the menu. I am unable to change position on menu or tooltip, as they need to be relative to any other tooltips and menus. I have a working jsfiddle of this game: https://jsfiddle.net/fm6zrtuq/ all you need to do is press the gear icon in the top right and hover over the icon with the trophy and you can see what i really mean.

CodePudding user response：

from what I've understood you want to achieve something like this:

.menu {
  position: relative;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: gray;

}
.menu:hover .tooltip {
left: 5px;
}

.tooltip {
  position: absolute;
  left: -5px;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: black;
  transition: .5s;
}

<div class='menu'>
  <div class='tooltip'></div>
</div>