title属性是唯一零配置、不触发重排、无需JS/CSS即生效的原生悬浮方案，适合静态提示；但仅支持纯文本、无样式控制、移动端基本失效，且disabled状态不显示。
用 title 属性最简实现悬浮提示
直接在 <img> 标签里加 title 属性，浏览器原生支持，无需 JS 或 CSS：
<img src="photo.jpg" alt="示例图" title="这是悬浮时显示的文字">
鼠标悬停几毫秒后就会弹出系统默认样式的浅色 tooltip。优点是零兼容性问题、不依赖任何外部资源；缺点是样式完全不可控（字体、颜色、圆角、箭头、延迟时间等都不能改），且移动端基本不触发。
用 data-tooltip + CSS 实现自定义样式
想换颜色、加动画、控制宽高？得脱离 title，改用自定义属性配合伪元素：
- 给
<img>加data-tooltip="提示内容" - 用
::before和::after生成提示框和小箭头 - 靠
position: relative+absolute定位，避免影响布局 - 必须加
cursor: pointer（否则部分浏览器 hover 不灵敏）
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
img[data-tooltip] {
position: relative;
cursor: pointer;
}
img[data-tooltip]:hover::before,
img[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
img[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 1000;
}
img[data-tooltip]::after {
content: '';
position: absolute;
bottom: 115%;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
为什么不用 alt 做悬浮提示
alt 是无障碍描述，不是 UI 提示：
- 屏幕阅读器会朗读
alt，但鼠标悬停时不会显示 - 某些浏览器（如 Chrome）在图片加载失败时才显示
alt文本 - 把操作说明、补充信息塞进
alt，会干扰视障用户理解图像本质 - SEO 角度也不建议滥用
alt堆砌关键词
移动端适配要注意什么
纯 hover 的 tooltip 在 iOS/Android 上基本失效——因为没“悬停”概念：
- 触摸屏首次点击会触发 hover，但第二次起就不稳定
- 更可靠的做法是加一个显式触发按钮，或改用 click/tap 事件 + JS 控制显隐
- 如果坚持用 hover，至少加
@media (hover: hover)媒体查询做降级 - 别依赖 tooltip 传递关键信息，重要文案必须常驻页面
真正容易被忽略的是：tooltip 内容不能比图片本身更重要。它只是辅助，不是主信息载体。
