Проблема с CSS всплывающими подсказками в сочетании с переполнением: прокрутка / авто (и абсолютное положение)

Question

У меня проблемы с моими всплывающими подсказками css в сочетании с контейнерами с переполнением-y: авто (или прокруткой).

Либо hoverBox содержится внутри этого контейнера и не выходит из это как и предполагалось, в результате чего всплывающая подсказка едва видна.

Или, если я "исправлю" эту проблему, изменив положение: относительно контейнера (прокомментировано в коде / ссылке ниже), у меня возникла новая проблема, где позиция hoverBox ниже, чем должна быть при прокрутке вниз внутри контейнера, пока она полностью не исчезнет под нижним концом окна, когда вы прокрутите вниз достаточно длинный список.

https://jsfiddle.net/tcdueLvo/

Поскольку страница находится далеко от статического веб-сайта c, явная установка позиций 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

Подход, который вы используете для создания всплывающей подсказки, неверен. Вы должны обернуть элемент <p> и элемент <div> (hover) в родительский элемент <div>, положение которого должно быть установлено на относительно . Наведение <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>

Answer 2

Трудно решить по 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>