我想在拆分屏幕中添加一个工具提示。我尝试很多这样的组合一个，但他们都失败了。我的工具提示始终隐藏在第二个“屏幕”后面到目前为止，这是我的代码<!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 回答
慕容森
TA贡献1853条经验 获得超18个赞
如果需要在左栏中进行滚动，则最好的选择是找到一种使工具提示存在于元素外部的方法-不是作为孩子，而是作为兄弟。
<body>
<tooltip></tooltip>
<left-column></left-column>
<right-column></right-column>
</body>
添加回答
举报
0/150
提交
取消