How can I make a my CSS tooltip scrollable?

Question

I'm trying to create a tooltip inside a scrollable div-element:

.tooltip {
  display: none;
  position: absolute;
  background-color: #000;
  color: #fff;
}

.parent:hover .tooltip {
  display: block
}

#list {
  height: 40px;
  overflow: auto;
  width: 80px
}

<div id="list">
  <div class="parent">
    Element1<span class="tooltip">Tip1</span>
  </div>
  <div class="parent">
    Element2<span class="tooltip">Tip2</span>
  </div>
  <div class="parent">
    Element3<span class="tooltip">Tip3</span>
  </div>
  <div class="parent">
    Element4<span class="tooltip">Tip4</span>
  </div>
</div>

The tooltip becomes visible when hovering over the parent but if I scroll down the list, the tooltip does not scroll up with the associated parent.

If I change the style of tooltip to position: relative, they follow their parents but they displace the other parents.

How can I make my tooltip scrollable, while still making it appear above its surrounding?

Answer 1

You probably need to explicitly give each parent a property of position: relative;. The element with position: absolute; attaches to the nearest parent with position: relative; set on it.

.parent {
  position: relative;
}