Как избежать переполнения: скрыто только одним элементом? ⇐ CSS

[Anonymous]

Прежде чем пометить это как дубликат, прочтите следующее:
У меня есть меню (контейнер) с абсолютной позицией, параметр overflow-y настроен на прокрутку, а overflow-x скрыт. У меня также есть всплывающие подсказки при наведении курсора на части меню, и некоторые из них выходят за пределы меню. По какой-то причине всплывающие подсказки никогда не будут отображаться за пределами контейнера, и я пробовал абсолютное положение, z-индекс и даже переполнение-x:visible. Ничего из этого не работает. Например:
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;
}

Код: Выделить всё

Код: Выделить всё

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

HTML:

Код: Выделить всё

и всплывающая подсказка никогда не будет отображаться за пределами меню. Я не могу изменить положение меню или всплывающей подсказки, поскольку они должны быть относительно любых других всплывающих подсказок и меню. У меня есть рабочий jsfiddle этой игры: https://jsfiddle.net/fm6zrtuq/
все, что вам нужно сделать, это нажать значок шестеренки в правом верхнем углу и навести курсор на значок с трофеем, и вы увидите, что я действительно имею в виду.

Подробнее здесь: https://stackoverflow.com/questions/743 ... ne-element