CSS绝对定位实现图片悬停提示气泡

  
  

    这是图片的提示信息
  

.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip-container img {
width: 100px;
height: 100px;
cursor: pointer;
}
.tooltip-bubble {
position: absolute;
top: -60px;  / 气泡在图片上方 /
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 10;
}
/ 添加小三角（可选） /
.tooltip-bubble::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #333;
}
.tooltip-container:hover .tooltip-bubble {
opacity: 1;
visibility: visible;
}