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

Question

I'm having trouble with my css hover tooltips in combination with containers that have overflow-y:auto (or scroll).

Either the hoverBox is contained inside that container and not popping out of it as intended, causing the tooltip to barely be visible.

Or if I "fix" this problem by changing position:relative on the container (commented in the code/link below), I have a new problem where the hoverBox position is lower than it should be when I scroll down inside the container, until it completely disappears below the bottom end of the window when you scroll down far enough on long lists.

https://jsfiddle.net/tcdueLvo/

Since the page is far from a static website, explicitly setting the hoverBox positions (or updating them whenever something moves) is not an option.

<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

It is difficult to solve by css. I recommend change your web design or control tooltip position by 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>