最简悬停提示用 的 title 属性，浏览器原生支持；但 alt 不触发悬停，仅用于替代文本和可访问性；移动端不支持 title，关键信息勿依赖；自定义样式需 data-tooltip + css ::after；无障碍须加 aria-label；动态场景推荐事件委托与轻量库如 tippy.js。
用 title 属性最简实现悬停提示
直接在 <img> 标签里加 title 属性，浏览器原生支持，无需 JS 或 CSS。鼠标悬停时自动显示浅色气泡提示，内容就是 title 的值。
常见错误是把提示文字写进 alt —— alt 仅用于图片加载失败或读屏器，不会触发悬停效果。
<img src="cat.jpg" alt="一只橘猫" title="这是我家养的橘猫，三岁，爱睡觉">- 提示内容建议简洁，超过两行可能被截断；避免换行符或 HTML 实体（如
- 移动端 Safari 和部分安卓浏览器不触发
title悬停（因无“鼠标悬停”概念），别依赖它做关键信息传达
用 data-tooltip + CSS 实现自定义样式
想控制颜色、箭头、动画或适配深色模式？得绕过 title，用自定义属性配合 CSS ::after 伪元素。
核心思路：给 <img> 加 data-tooltip 存提示文本，再用 CSS 定位生成提示框。
- HTML：
<img src="dog.jpg" alt="金毛犬" data-tooltip="品种：拉布拉多，年龄：2岁"> - CSS 关键点：
position: relative给图片设定位上下文；::after用content: attr(data-tooltip)取值；white-space: nowrap防止换行 - 注意 z-index：如果图片在卡片或模态框里，提示框可能被遮挡，需手动调高其
z-index
用 aria-label 兼顾可访问性
纯视觉提示对屏幕阅读器用户无效。若提示信息属于内容补充（比如图标按钮含义），应同时提供无障碍支持。
title 和 data-tooltip 都不被读屏器主动朗读，必须显式声明语义。
- 推荐组合：
<img src="icon-print.png" alt="" aria-label="打印当前页面" data-tooltip="打印当前页面"> -
alt=""表示该图像是装饰性的（否则读屏器会重复读aria-label） - 不要用
aria-labelledby指向隐藏元素——增加 DOM 复杂度，且移动端兼容性不稳定
JS 动态绑定 tooltip 时的坑
如果图片是异步加载（如列表滚动加载），或需根据数据动态生成提示，就得用 JS 绑定。但别直接监听 mouseenter 后 innerHTML 插入提示框——容易导致内存泄漏和重复绑定。
- 优先用事件委托：监听父容器，用
event.target.matches('img[data-tooltip]')判断目标 - 提示框元素建议用
document.createElement('div')单例复用，而非每次新建；移除时清空textContent而非remove() - 避免在
mousemove里实时计算位置——性能差，改用mouseenter+getBoundingClientRect()一次取值
复杂交互（如点击展开详情、支持 HTML 内容）就别硬撑 CSS 方案，直接上轻量 tooltip 库，比如 tippy.js —— 它处理了定位边界、焦点管理、过渡动画这些容易忽略的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
