最简单方案是用title属性，但仅支持纯文本且移动端不触发；推荐CSS :hover+::after实现自定义气泡；复杂需求需JS动态控制位置与内容，并注意移动端适配和可访问性。
用 title 属性最简单但有局限
直接给 <img> 标签加 title 属性，浏览器会自动在鼠标悬停时显示提示文字，比如：<img src="cat.jpg" title="这是一只橘猫">。但它只能显示纯文本，无法控制样式、位置或延迟；移动端通常不触发；而且文字内容会被屏幕阅读器读出，可能影响无障碍体验。
用 CSS 的 :hover + ::after 实现自定义气泡
这是更可控的方式：把图片包进一个容器（如 <div>），用 CSS 控制悬停时显示文字。关键点是用 ::after 伪元素生成提示内容，避免额外 DOM 节点。
示例结构：
<div class="img-tip"> <img src="dog.jpg" alt="小狗"> </div>
CSS 写法：
立即学习“前端免费学习笔记（深入）”；
.img-tip {
position: relative;
display: inline-block;
}
.img-tip::after {
content: "汪汪！这是我家狗子";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.img-tip:hover::after {
opacity: 1;
visibility: visible;
}注意几个坑：
-
position: relative必须加在容器上，否则::after的绝对定位会相对于 body - 移动端 Safari 不触发
:hover，除非用户点过一次页面（iOS 默认禁用 hover） - 如果图片宽高不确定，
left: 50%+transform比固定left更安全
用 JavaScript 动态控制显示时机和内容
需要响应式提示、延迟显示、或根据图片加载状态动态更新文字时，就得用 JS。核心是监听 mouseenter 和 mouseleave，手动插入/移除提示元素。
基础逻辑：
const img = document.querySelector('img[data-tip]');
img.addEventListener('mouseenter', () => {
const tipText = img.dataset.tip;
const tipEl = document.createElement('div');
tipEl.className = 'custom-tip';
tipEl.textContent = tipText;
document.body.appendChild(tipEl);
<p>// 计算位置：紧贴图片下方居中
const rect = img.getBoundingClientRect();
tipEl.style.left = rect.left + rect.width / 2 - tipEl.offsetWidth / 2 + 'px';
tipEl.style.top = rect.bottom + 8 + 'px';
});
img.addEventListener('mouseleave', () => {
document.querySelector('.custom-tip')?.remove();
});实际用时要注意：
- 别忘了加
data-tip属性，比如：<img src="bird.jpg" data-tip="这只鸟在枝头停了三秒"> - 如果页面滚动，提示框位置会错乱——得监听
scroll并重新定位，或改用position: fixed+window.scrollY补偿 - 频繁创建/删除 DOM 元素可能影响性能，建议复用同一个提示元素
移动端适配不是加个 hover 就完事
iOS 和 Android 的触摸设备默认不支持 :hover 伪类，哪怕你写了 img:hover，手指划过去也不会触发。真要兼容，得主动监听 touchstart，或者用 @media (hover: hover) 做媒体查询区分。
例如：
@media (hover: hover) and (pointer: fine) {
.img-tip:hover::after {
opacity: 1;
visibility: visible;
}
}
@media (hover: none) and (pointer: coarse) {
.img-tip {
/* 触摸设备下，改用点击展开提示 */
}
}更现实的做法是：放弃“悬停即显示”，改用点击弹出提示框，或者干脆只对桌面端启用 hover 提示——毕竟手机用户本来就不指望“悬停”这个交互。
真正难的不是写几行 HTML 或 CSS，而是判断这个提示到底该出现在哪里、持续多久、要不要跟随滚动、是否影响可访问性。这些细节堆起来，才决定它到底能不能用。
