CSS悬停工具提示的问题以及与之结合的溢出:滚动/自动(和位置绝对)

问题描述 投票:0回答:1

编辑:当然,发布后,我发现了一个涉及该主题的主题: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>
html css scroll hover tooltip
1个回答
0
投票

很难用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>
© www.soinside.com 2019 - 2024. All rights reserved.