html：工具提示在带滚动的拆分屏幕上隐藏为div
我想在拆分屏幕中添加一个工具提示。我尝试很多这样的组合一个，但他们都失败了。我的工具提示始终隐藏在第二个“屏幕”后面
到目前为止，这是我的代码
<!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>
大话西游6662回答
-
慕容森
如果需要在左栏中进行滚动，则最好的选择是找到一种使工具提示存在于元素外部的方法-不是作为孩子，而是作为兄弟。<body> <tooltip></tooltip> <left-column></left-column> <right-column></right-column></body>
随时随地看视频慕课网APP
相关分类
JavaScript