Html：工具提示隐藏在带有滚动的分屏上的 div 后面（需要在父容器上保留 "overflow-y:auto"）

Question

我想在分屏内添加工具提示。我尝试了很多这样的组合，但都失败了。我的工具提示总是隐藏在第二个 "screen"

后面

到目前为止，这是我的代码

<!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   

.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>

Answer 1

将a-leftcolumn溢出改为visible；由于您设置的 overflow 规则，工具提示已隐藏。溢出通常会隐藏元素内部的内容，除非您将其设置为 visible，顺便说一句，这也是默认设置，因此您可以完全删除此规则。

<!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   

.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>

Answer 2

如果您需要在左栏内滚动，最好的办法是找到一种方法让工具提示存在于元素之外——不是作为子元素，而是作为兄弟元素。

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

Html：工具提示隐藏在带有滚动的分屏上的 div 后面（需要在父容器上保留 "overflow-y:auto"）

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

html

javascript

tooltip