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>

2 Answers

1
Starcat On Best Solutions

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>
0
Starcat On

Change a-leftcolumn overflow to visible; The tooltip is hidden because of the overflow rules you set. Overflow generally hides stuff inside of the element unless you set it to visible, which is also the default btw so you can probably remove this rule entirely.

<!DOCTYPE html>

<style>
a-leftcolumn {
    width: 8%;
    background: #EFF0F1;
    overflow: visible; /* Change overflow to VISIBLE */
    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>