最简单方案是使用title属性，但存在移动端不触发、无法换行和自定义样式等缺陷；无障碍需结合alt、aria-label或aria-labelledby；高级交互应采用CSS伪元素或轻量JS实现，并注意焦点管理和XSS防护。
用 title 属性最简单，但效果有限
绝大多数场景下，直接给 title 属性就能实现鼠标悬停显示提示框，比如：
@@##@@浏览器原生支持，无需 JS，兼容性好（IE6+ 都行）。但注意：移动端 Safari 和部分安卓浏览器默认不触发
title 提示；另外文字不能换行、无法自定义样式、不支持 HTML 内容。
aria-label 或 aria-labelledby 是无障碍刚需
仅靠 title 不满足 WCAG 无障碍标准。屏幕阅读器可能忽略 title，尤其当 alt 已存在时。正确做法是：
- 图片有信息意义 → 必须写
alt，title可选作补充 - 图片纯装饰 →
alt=""，并加aria-hidden="true"，此时若还需提示，改用aria-label（值为纯文本） - 提示内容较复杂（如含标点、多句）→ 用
aria-labelledby指向一个
@@##@@
要样式/交互？得用 CSS + data-* 属性模拟 tooltip
原生 title 无法控制颜色、箭头、延迟、位置。常见替代方案是用 data-tooltip 配合 CSS ::after 伪元素：
- HTML 中写：
- CSS 中用
[data-tooltip]选择器 +position: relative+::after生成提示框 - 注意：伪元素内容只能是字符串，不能响应点击；若需交互（如关闭、链接），必须用 JS 动态插入真实 DOM 节点
- 避免用
hover实现——移动端无 hover 状态，应配合focus和touchstart补充
JS 方案慎选，别为 tooltip 引入大库
如果项目已用 jQuery UI 或 Bootstrap，可直接调 .tooltip() 方法，但要注意：
- Bootstrap 5 默认不启用 tooltip，需手动
new bootstrap.Tooltip(...) - 纯 JS 实现推荐用
title做 fallback，再用mouseenter/mouseleave控制自定义浮层显隐 - 务必监听
focus和blur，否则键盘用户无法访问提示 - 不要用
innerHTML直接渲染data-tooltip值——存在 XSS 风险，应使用textContent
Tab 键应能进入提示框内部（如有按钮），关闭后焦点要回到原图片上。立即学习“前端免费学习笔记（深入）”；
