CSS Hover-Tooltips 与溢出结合的问题：滚动/自动（和绝对位置）

Question

我的 css 悬停工具提示与具有 overflow-y:auto（或滚动）的容器结合使用时遇到问题。

hoverBox 包含在该容器内并且没有按预期弹出，导致工具提示几乎不可见。

或者，如果我通过更改容器上的 position:relative 来“解决”这个问题（在下面的代码/链接中注释），我会遇到一个新问题，即当我在容器，直到您在长列表上向下滚动足够远时它完全消失在窗口底端下方。

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>

Answer 1

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>

Answer 2

您创建工具提示的方法是错误的。您应该将<p> 元素和<div>（悬停）元素包装在父<div> 中，其位置应设置为relative。悬停<div> 应设置为绝对，并应相对于外部<div> 定位。

我已使用您的代码并对其进行了修改以遵循该方法并且它正在工作。

<style>
    .TTTrigger + div {
        display: none;
        position: absolute;
        border: 1px solid #a38d6d;
        z-index: 99999;
        min-width: 300px;
    }

    .container {
       width: 400px;
       height:400px;
    }
    .tooltip-container
    {
      position:relative;
      margin-bottom:15px;
    }
    .tooltip-container div
    {
      display:none;
      position:absolute;
      top:0px;
      left:30px;
    }
    .tooltip-container:hover div
    {
      display:block;
    }
</style>
  <div class="container">
       <div class="tooltip-container">
         <p class="TTTrigger">text</p><div>hoverBox toolTip text that explains some stuff</div>
       </div>
        <div class="tooltip-container">
         <p class="TTTrigger">text</p><div>hoverBox toolTip text that explains some stuff</div>
       </div>
    </div>