编辑:当然,发布后,我发现了一个涉及该主题的主题:How can I fix the position of tooltips within a scrolling <div>?我将对此进行查看并更新是否/如何解决了我的问题。
我在将css悬停工具提示与具有溢出y:auto(或滚动)的容器结合使用时遇到麻烦。
hoverBox都包含在该容器中,并且没有按预期方式从其弹出,导致工具提示几乎不可见。
或者如果我通过更改位置:相对于容器(在下面的代码/链接中注释)来“解决”此问题,则我有一个新问题,即hoverBox的位置低于我在容器内向下滚动时的位置,直到在长列表上向下滚动足够远时,它才完全消失在窗口底端下方。
https://jsfiddle.net/tcdueLvo/
由于该页面距离静态网站很远,所以不能选择显式设置hoverBox位置(或在发生任何移动时更新它们)。
<style>
.TTTrigger + div {
display: none;
position: absolute;
border: 1px solid #a38d6d;
z-index: 99999;
min-width: 300px;
}
.TTTrigger:hover + div {
display: inline-table;
}
</style>
<div>
<div style="overflow: auto; max-height: 150px; /*position: relative;*/ width: 150px;">
<p class="TTTrigger">text</p><div>hover</div><br>
<p class="TTTrigger">text</p><div>hover</div><br>
<p class="TTTrigger">text</p><div>hover</div><br>
<p class="TTTrigger">text</p><div>hover</div><br>
<p class="TTTrigger">text</p><div>hover</div><br>
<p class="TTTrigger">text</p><div>hover</div><br>
</div>
</div>
很难用CSS解决。我建议通过jQuery更改您的网页设计或控件提示位置。
$(".TTTrigger").hover(function() {
const div = $(this).next("div");
const top = $(this).offset().top + div.height();
div.css("top", `${top}px`)
div.addClass("d-inline-table");
}, function() {
$(this).next("div").removeClass("d-inline-table");
})
.TTTrigger+div {
display: none;
position: absolute;
border: 1px solid #a38d6d;
z-index: 99999;
min-width: 300px;
}
.d-inline-table {
display: inline-table!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div style="overflow: auto; max-height: 150px; /*position: relative;*/ width: 150px;">
<p class="TTTrigger">text</p>
<div>hover</div><br>
<p class="TTTrigger">text</p>
<div>hover</div><br>
<p class="TTTrigger">text</p>
<div>hover</div><br>
<p class="TTTrigger">text</p>
<div>hover</div><br>
<p class="TTTrigger">text</p>
<div>hover</div><br>
<p class="TTTrigger">text</p>
<div>hover</div><br>
</div>
</div>