JSFiddle - React, Tailwind, and code Playground

by Max Sinev

HTML

<div id="flex">
  <div id="box1">
    Flex Content<br>
    Flex Content<br>
    Flex Content<br>
    Flex Content<br>
    Flex Content<br>
    Flex Content<br>
  </div>
  <div id="box2">
    Flex Content with <span>Tooltip
    <div id="tooltip">
    Tooltip text
    </div></span><br>
    Flex Content<br>
    Flex Content<br>
    Flex Content<br>
    Flex Content<br>
    Flex Content<br>
    Flex Content<br>
  </div>
</div>

CSS

#flex {
  display: flex;
  flex-direction: column;
  height: 200px;
  width: 100%;
  position: relative; /* instead of on span */
}

#box1, #box2 {
  flex 1;
  overflow-y: auto; 
}

#box1 {
  background-color: lightgrey;
}
#box2 {
  background-color: lightblue;
}

span {
  text-decoration: underline;
}

#tooltip {
  background-color: lightgreen;
  display: none;
  position: absolute;
  height: 100px;
  width: 200px;
  bottom: -50px;
}

span:hover #tooltip {
  display: block;
}