CODEWITHSUNDEEP
javascripthtmltooltip
MagTun
MagTun

Reputation: 6185

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>

Upvotes: 0

Views: 2159

Answers (2)

Starcat
Starcat

Reputation: 701

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>

Upvotes: 1

Starcat
Starcat

Reputation: 701

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>

Upvotes: 0

Related Questions