使用CSS将元素相对于div中的上一个元素进行定位

Question

我们的想法是，当鼠标悬停在图像上时，只使用CSS将span元素中的文本显示为工具提示。工具提示应显示在图像上方，并相对于每个图像居中。分区内可能有任意数量的图像。

注意：我无法更改HTML的结构。

.parent-div {
position: relative;
}
img {
display: inline-block;
position: inherit;
}
img+span {
visibility: invisible;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
width: 120px;
top: -80%;
left: 9%;
margin-left: -16%;
position: absolute;
}
img+span:hover {
visibility: visible;
}

<div class="parent-div">
<img src="../icon.svg" alt="">
<span>Text1</span>
<img src="../icon2.svg" alt="">
<span>Text2</span>
</div>

但是，每个span元素都相对于主div元素定位自己，这意味着它们出现在第一个图标的上方，并且在另一个图标的顶部。

我希望span元素相对于每个img元素进行定位。

Answer 1

这是仅使用已知图像宽度(在示例中为120px(；

.parent-div {
position: relative;
width: 430px;
}
img {
float: left;
width: 120px; height: 100px;
margin-top: 40px;
box-sizing: border-box;
border: 1px solid orange;
}
img + span {
visibility: hidden;
display: block;
float: left;
width: 120px;
margin-left: -120px;
margin-top: 10px;
box-sizing: border-box;
padding: 5px 5px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
border: 1px solid green;
background: pink;
}
img:hover{
border: 1px solid red;
}
img:hover + span {
visibility: visible;
}

<div class="parent-div">
<img src="../icon.svg" alt="">
<span>Text1</span>
<img src="../icon2.svg" alt="">
<span>This is a very long tooltip text with some other text</span>
<img src="../icon.svg" alt="">
<span>Text3</span>
<img src="../icon2.svg" alt="">
<span>Text4</span>
<img src="../icon.svg" alt="">
<span>Text5</span>
<img src="../icon2.svg" alt="">
<span>Text6</span>
</div>

Answer 2

以下是已知/有限数量的图像和已知图像宽度的答案。使用nth-of-type选择器，您可以为工具提示计算一个左值——不过，您必须手动创建所有选择器，或者使用预处理器来生成(希望(足够多的选择器。当图像开始跨越多行时，不要忘记添加top值…

.parent-div {
position: relative;
}
img {
display: inline-block;
position: inherit;
}
img + span {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
background: black;
color: white;
padding: 5px;
}
img:nth-of-type(2) + span {
left: calc(1 * 155px);
}
img:nth-of-type(3) + span {
left: calc(2 * 155px);
}
img:nth-of-type(4) + span {
left: calc(3 * 155px);
}
/* and so on ... */
img:hover + span {
visibility: visible;
}

<div class="parent-div">
<img src="https://via.placeholder.com/150">
<span>Text1</span>
<img src="https://via.placeholder.com/150">
<span>Text2</span>
<img src="https://via.placeholder.com/150">
<span>Text3</span>
</div>