Переполнение подсказки отсекается с помощью overflow-y: auto; ⇐ CSS

[Anonymous]

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}

.game-right {
width: 250px;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 40px;
}
#container,
#upgrade {
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-height: 400px;
overflow: visible;
padding-right: 20px;
position: relative;

}

.tooltip-container {
position: relative;

z-index: 1;

}

.tooltip-container button {
width: 100%;
}

.tooltip {
visibility: hidden;
position: absolute;
right: 105%;

top: 50%;
transform: translateY(-50%);
background-color: #333;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
white-space: nowrap;
z-index: 9999;

opacity: 0;
transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}

.tooltip::before {
content: "";
position: absolute;
right: -10px;

top: 50%;
transform: translateY(-50%);
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #333;
}



Employees

Worker: $10 (0)
Earns $1.5 per second






По сути, я хочу, чтобы элемент div мог прокручиваться, когда есть слишком много контента, но когда я использую overflow-y: auto; подсказки обрезаются. (Вот Jsfiddle, пробелы и прочее потерты, но вы можете видеть, что в контейнере они обрезаны. https://jsfiddle.net/kj5wLo4b/1/)
I Я пытался изменить Z-индекс многих вещей несколько раз и создать для него DOM, но ничего не помогло, я просто хочу иметь возможность прокручивать контейнер и не обрезать всплывающие подсказки, лол. Я также попытался переместить позицию: относительная из .tooltip в #container и новый .container, как предложено в элементе Tooltip, с абсолютным позиционированием, обрезанным контейнером с переполнением: auto, но это привело только к полному исчезновению всплывающих подсказок


body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}

.game-right {
width: 250px;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 40px;
}
#container,
#upgrade {
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-height: 400px;
overflow: visible;
padding-right: 20px;
position: relative;

}

.tooltip-container {
position: relative;

z-index: 1;

}

.tooltip-container button {
width: 100%;
}

.tooltip {
visibility: hidden;
position: absolute;
right: 105%;

top: 50%;
transform: translateY(-50%);
background-color: #333;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
white-space: nowrap;
z-index: 9999;

opacity: 0;
transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}

.tooltip::before {
content: "";
position: absolute;
right: -10px;

top: 50%;
transform: translateY(-50%);
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #333;
}



Employees

Worker: $10 (0)
Earns $1.5 per second





Подробнее здесь: https://stackoverflow.com/questions/793 ... low-y-auto