JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

HTML

<div>
  <div class="problematic-wrapper">
    <div>
      <p>tooltip text 111</p>
      <div class="tooltip">
        <p>tooltip text 222</p>
      </div>
    </div>
  </div>
</div>

CSS

.problematic-wrapper {
  background: #00a750;
  position: absolute;
  left: 200px;
  top: 100px;
  padding: 15px;
  zoom: 0.5;
}

.tooltip {
  display: block;
  /* position: fixed; */
  left: 100px; /* 200 - 100 (width) */
  top: 115px;
  background: yellow;
}