Making tooltip appear over its overflow:scroll parent

I have a list of items from my server that appear in a sidebar with fixed height and overflow:scroll.

I want a tooltip to appear for each of these items with additional information about it.
At the moment, the tooltip appears next to it, even when scrolling.
My problem is that it appears within the initial overflow:scroll element, but I want it to appear above everything so that it doesn’t expand the div and is more easily visible.
Since the information that appears in the tooltip depends on the particular element, it still needs to be inside the scroll element.

I would prefer to solve this with CSS and HTML only, but I realize that this is probably impossible. I am open to using simple JS to solve this problem.

I have searched for an answer to this problem and found this : Display tooltip when container overflow is hidden. But it doesn’t work for overflow:scroll, there are also comments on this problem in this question. I have tried to add the position:fixed as suggested. This solves the problem of appearing on top of the other elements, but the tooltips don’t scroll with the parent element: so they appear further and further down in the page, completely shifted.

There was also this answer which was interesting, but I am not sure how to make it work for my application : With querySelector. I do want to have more control than just text over my tooltip, so I am unsure how to access the element as I am fairly new to JS.

A simplified example of what I have:

<div class="listOfItems">
  {items.map(item => {
    return (
      <div class="itemContainer">
        <div class="itemLabel">{item.label}</div>
        <div class="tooltip">
          {item.informations.map(info => {
            return <div> {info.label} </div>
            })
          }
        </div>
      </div>
    )
  })
}
</div>

.listOfItems {
  overflow: scroll;
  position: relative;
  z-index: 0;
}
.itemContainer {
  display: flex;
}
.tooltip {
  position: absolute;
  z-index: 30;
  visibility: hidden;
}
.itemLabel:hover + .tooltip {
  visibility: visible;
}

Recap:

• With position:absolute, my tooltip follows its parent element but doesn’t appear over the overflow:scroll element.
• With position:fixed, my tooltip appears over the overflow:scroll but doesn’t follow its parent element on scroll.