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

<div class="tooltip-container">
  <img src="example.jpg" alt="示例图片" />
  <div class="tooltip-bubble">
    这是图片的提示信息
  </div>
</div>

.tooltip-container {
  position: relative;
  display: inline-block;
}
<p>.tooltip-container img {
width: 100px;
height: 100px;
cursor: pointer;
}</p><p>.tooltip-bubble {
position: absolute;
top: -60px;  /<em> 气泡在图片上方 </em>/
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;
}</p><p>/<em> 添加小三角（可选） </em>/
.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;
}</p><p>.tooltip-container:hover .tooltip-bubble {
opacity: 1;
visibility: visible;
}</p>