tooltip overflow being cut off by using overflow-y: auto;

Question

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;
}

                  <div class="game-right">
                    <!-- Upgrades section -->
                    <div id="container" style="max-height: 800px; overflow-y: auto;">
                        <div class="section-title">Employees</div>
                        <div class="tooltip-container">
                            <button id="extraButton" onclick="extraAction();">Worker: $10 (0)</button>
                            <span class="tooltip" id="Workertooltip">Earns $1.5 per second</span>
                        </div>
                    </div>
                    </div>

So basically, I want a div to be able to scroll when there is too much content, but when I use the overflow-y: auto; the tooltips get cut off. (Here is the Jsfiddle, the spacing and stuff is scuffed but you can see that it gets cut off in the container. https://jsfiddle.net/kj5wLo4b/1/ )

I have tried changing the Z-index of many thing multiple times, and creating a DOM for it, but nothing has worked, I just want to be able to scroll on the container and not have the tooltips to be cut off lol. I also tried moving the position: relative from .tooltip into #container and a new .container as suggested in Tooltip element with absolute positioning being clipped by container with overflow: auto but that only made the tooltips completely disappear

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;
}



                  <div class="game-right">
                    <!-- Upgrades section -->
                    <div id="container" style="max-height: 800px; overflow-y: auto;">
                        <div class="section-title">Employees</div>
                        <div class="tooltip-container">
                            <button id="extraButton" onclick="extraAction();">Worker: $10 (0)</button>
                            <span class="tooltip" id="Workertooltip">Earns $1.5 per second</span>
                        </div>
                    </div>
                    </div>