javascript - 是否在滚动div中将工具提示图像悬停在鼠标指针附近？

我有一个span元素，它在文本中多次出现，通过这些样式，总是有一个子<img>元素，它作为可悬停的图像工具提示。

.tooltipLink img {
  float:left;
  display:none;
}
.tooltipLink:hover img{
  display:inherit;
  position:absolute;
  z-index:1000;
  overflow:hidden;
  border-radius: 13px;
}

文字为<span className="tooltipLink">something like this<img src="linkToImg.jpg"></span>。现在，我已经开始将这些范围添加到页面的一部分中，该范围在其自身内滚动（这是一个max-height:500px和overflow-y:scroll的div），并将鼠标悬停在该div的范围内会导致向下的偏移量，通常导致图片在页面上不可见。我已经尝试过各种layout关键字，但实际上没有解决此问题的方法。最好将div一直滚动到顶部，但要开始向下滚动div以显示其他范围，并且工具提示图像会逐渐向下移动到页面下方，直到完全消失。

如果我将位置更改为inherit，它至少会接近触发它的跨度，但是它将文本推开而不是悬停在文本上方（尽管z-index）。那是我到目前为止最接近的。

最佳答案

您的.tooltipLink是否有position:relative？

.tooltipLink {
  position:relative;
}

demo