您想知道position: relative不会在内联元素上创建堆栈上下文。所以你的.tooltip应该是例如。inline-block：

.wrapper {
  position: relative;
  background-color: #DCDCDC;
  /* background-image: linear-gradient(180deg, #fff, #e4e5f0); */
}

.tooltip {
  transform: none;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.tooltip-scroll {
}

.tooltip:hover>.tooltip-text,
.tooltip:hover>.wrapper {
  pointer-events: auto;
  opacity: 1.0;
}

.tooltip>.tooltip-text,
.tooltip>.wrapper {
  display: block;
  position: relative;
  z-index: 6000;
  max-width: 350px;
  overflow: visible;
  padding: 5px 8px;
  border: 1px solid #575757;
  margin-top: 10px;
  line-height: 16px;
  border-radius: 4px;
  text-align: left;
  color: black;
  /* background: #DCDCDC; */
  background-image: linear-gradient(180deg, #fff, #e4e5f0);
  pointer-events: none;
  opacity: 0.0;
  transition: all 0.4s ease-out;
}

/* Arrow */

.tooltip>.tooltip-text:before,
.tooltip>.wrapper:before {
  display: inline-block;
  top: -7px;
  content: "";
  position: absolute;
  border: solid;
  border-color: rgba(0, 0, 0, 1) transparent;
  border-width: 0 .5em .5em .5em;
  z-index: 6000;
  /* left: calc(var(--variable-width) + 20px);*/
  /* left: 100%-20px
        
         */
  /* left: 20px; */
}

.tooltip>.wrapper {position:absolute}
/* Invisible area so you can hover over tooltip */

.tooltip>.tooltip-text:after,
.tooltip>.wrapper:after {
  top: -20px;
  content: " ";
  display: block;
  height: 20px;
  position: absolute;
  width: 60px;
  left: 20px;
}

.wrapper>.tooltip-text {
  overflow-y: auto;
  height: 50px;
  display: block;
}

RANDOM TEXT COMING FROM API
<span class="tooltip tooltip-scroll">
    <img style="width: 16px; height: 16px" id="di_1230575183658::::16" alt="Er" src="imag.png">
  <span class="wrapper"> 
     <span class="tooltip-text">
         HOVER TEXT
      </span>
  </span>
</span>

• .tooltip>.tooltip-text,将这些作为无效选择器删除
• 在CSS上留下了不需要的评论。

这其中的大部分可能是CSS自己解释的。关键是各种transform，如transform: translate(-1em, 7em);

• 我确实添加了一个 Package 器，使定位相对容易，由于这一点
• 使用em，因为我的大脑更好地使用它，所以1em == 16px等。
• 注意“箭头”是如何在图像下居中的，alt文本是如何与大小混淆的，因为它比1x 1 em/16 px宽。

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #ff00ff;
}

.tooltip-container {
  /* this becomes the hover area */
  display: inline-block;
  width: 2em;
  height: 2em;
  margin-top: -6em;
  padding: 1.5em;
  border: solid 1px #FF0000;
  transform: translate(-1em, 7em);
}

.tooltip {
   border: solid 1px #00FF00;
}

.wrapper {
  transform: translate(-1em, -0.25em);
}

/* span has this already
.tooltip-scroll {
  display: inline;
}
*/

.tooltip>.wrapper {
  display: block;
  z-index: 6000;
  max-width: 21.875em;
  min-width: 10em;
  overflow: visible;
  padding: 0.25em 0.5em;
  border: 1px solid #575757;
  margin-top: 0.625em;
  line-height: 1em;
  border-radius: 0.25em;
  color: black;
  background-image: linear-gradient(180deg, #fff, #e4e5f0);
  pointer-events: none;
  opacity: 0.0;
  transition: all 0.4s ease-out;
}

.tooltip-container:hover>.tooltip>.wrapper {
  pointer-events: auto;
  opacity: 1.0;
}

.tooltip>.wrapper:before {
  /* Arrow */
  display: block;
  transform: translate(0.5em, -0.75em);
  content: "";
  width: 0;
  border: solid;
  border-color: rgba(0, 0, 0, 1) transparent;
  border-width: 0 .5em .5em .5em;
  z-index: 6000;
}

RANDOM TEXT COMING FROM API
<span class="tooltip-container">
  <span class="tooltip tooltip-scroll">
      <img id="di_1230575183658::::16" alt="Er" src="imag.png" />
    <span class="wrapper"><span class="tooltip-text">HOVER TEXT this is better bigger perhaps for our test and even better with more </span></span>
</span>
</span>/*.tooltip>.tooltip-text,  invalid selector */