CSS 悬停工具提示与溢出相结合的问题：scroll/auto（和绝对位置）

Question

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

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

或者如果我 "fix" 通过更改容器上的 position:relative 这个问题（在下面的 code/link 中评论），我有一个 hoverBox 位置低于它的新问题应该是当我在容器内向下滚动时，直到当你在长列表上向下滚动足够远时它完全消失在 window 的底端下方。

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>

CSS 悬停工具提示与溢出相结合的问题：scroll/auto（和绝对位置）

Problem with CSS Hover-Tooltips in combination with overflow:scroll/auto (and position absolute)

html

css

scroll

tooltip

hover