Html: tooltip is hidden behing div on a split screen with scroll (need to keep "overflow-y:auto" on parent container)

I would like to add a tooltip inside a split screen. I have try many combination like this one, but all of them failed. My tooltip is always hidden behind the second "screen"

Here is my code so far

<!DOCTYPE html>

<style>
a-leftcolumn {
    width: 8%;
    background: #EFF0F1;
    overflow-y: auto;
    overflow-x: scroll;
    position: absolute;
    top: 0px;
    left: 2px;
    bottom: 0px;
    padding-left: 3px;
    font-size: 10px;
}


a-main {
    width: 90%;
    overflow: auto;
    position: absolute;
    top: 0px;
    left: 9%;
    bottom: 0px;
}

/*  tooltip   https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/

.has-tooltip {
    /*position: relative;*/
    display: inline;
}

.tooltip-wrapper {
    position: absolute;
    visibility: hidden;
}

.has-tooltip:hover .tooltip-wrapper {
    visibility: visible;
    opacity: 0.7;
    /*top: 30px;*/
    /*left: 50%;*/
    /*margin-left: -76px;*/
    /* z-index: 999; defined above with value of 5 */
}

.tooltip {
    display: block;
    position: relative;
    top: 2em;
    right: 30%;
    width: 140px;
    height: 96px;
    /*margin-left: -76px;*/
    color: #FFFFFF;
    background: #000000;
    line-height: 96px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 4px 3px 10px #800000;
}

.tooltip:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-bottom: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

/*  end tooltip  */
</style>

<body>


<a-leftcolumn>


    <a class="has-tooltip" href="#">Hover me for Tooltip
        <span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>


</a-leftcolumn>


<a-main>
    Some text
</body>

</html>

Solution

If you need to have scrolling inside the left column, your best bet is to find a way to have the tooltip exist outside the the element - not as a child, but as a sibling.

<body>
    <tooltip></tooltip>
    <left-column></left-column>
    <right-column></right-column>
</body>