img标签必须设置src属性，title和alt均非必需；src指定图像路径，是显示图片的必要条件。
直接结论：img 标签必须设置 title 属性，鼠标悬停才可能显示提示文字；alt 属性完全不参与悬停提示，只在图片加载失败或无障碍场景下起作用。
为什么 img 的 alt 不会触发悬停提示？
浏览器明确区分了两个属性的语义和用途：alt 是替代内容（fallback），属于可访问性必需字段；title 才是规范定义的「建议性提示信息」（advisory information）。主流浏览器（Chrome、Firefox、Edge、Safari）自 2010 年代起已统一移除对 alt 的悬停渲染支持——哪怕你写了 <img src="x.jpg" alt="说明文字">，鼠标悬停也什么都不会显示。
常见错误现象：
- 开发者误以为加了
alt就自动有 tooltip，结果测试时完全没反应 - 把重要提示文字只塞进
alt，导致视觉用户看不到任何说明 - 用空格或长句填充
alt试图“强制触发”，无效且损害可访问性
title 属性的实际表现与兼容性限制
title 确实是正确解法，但它的行为不是完全可控的：
- 提示框出现时机、延迟、停留时长、样式均由浏览器/操作系统决定，无法用 CSS 定制外观（比如圆角、阴影、箭头）
- Firefox 和旧版 Safari 最多显示约 60 个字符，超出部分会被截断（无省略号）
- 移动端 Safari 和 Chrome 在触摸设备上基本不触发
title提示（无 hover 概念） - 屏幕阅读器通常忽略
title，它不被视为语义化辅助内容
示例有效写法：<img src="icon-user.png" title="用户头像（点击编辑）">
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
什么时候该用 title，什么时候不该用？
适用场景（推荐用 title）：
- 补充非关键信息，比如「拍摄于 2024-03-15」「版本 v2.1.0 图标」
- 内部管理后台中，给图标按钮加简短操作说明（如
title="导出为 CSV"） - 图片本身语义清晰，仅需轻量提示，不依赖用户必须看到
不适用场景（应换方案）：
- 关键操作说明（如「删除后不可恢复」）→ 必须用可见文案或模态框
- 需要支持移动端或键盘导航 →
title失效，改用aria-label或显式标签 - 要控制样式、位置、交互（如点击展开详情）→ 改用
<div> + <code>mouseenter+ 自定义 tooltip 组件alt 和 title 同时存在时怎么填？
二者职责不同，应分开填写，不要简单复制粘贴：
-
alt：描述图片「是什么」或「起什么作用」，用于盲人用户和 SEO。例如：alt="公司微信公众号二维码" -
title：描述「额外上下文」，比如：title="扫码关注，获取最新活动通知"
如果图片纯装饰（如分隔线、背景花边），
alt=""（空值），但不要删掉alt属性；title则可省略，避免无意义提示干扰用户。最容易被忽略的一点：很多团队把
title当作「万能提示字段」滥用，结果在触屏设备、无障碍模式、自动化测试中全部失效——它只是最轻量的 fallback 提示，不是交互主通道。 -
