SVG 中 title 属性不触发悬停气泡，因规范不支持；有效可访问标题须用 <title> 元素作为 <svg> 直接子元素，并配 aria-hidden="false" 和 focusable="false"。
SVG里加title属性根本不会出悬停气泡
这不是兼容性问题，是规范层面的无效操作。你在<circle title="删除">或<svg title="图表">里写的title，浏览器压根不解析为悬停提示——鼠标悬停无反应，JS 也读不到这个值，屏幕阅读器更不会朗读。常见错误是把 SVG 当成普通 HTML 元素套用习惯，结果测试时发现“明明写了却没提示”，实际是它从一开始就不该这么写。
真正能被读屏软件识别的只有 SVG 内部的<title>元素
必须满足三个硬性条件，缺一不可：
-
<title>必须是<svg>的**直接子元素**，不能包在<g>、<defs>或任何其他容器里 - 要配合
aria-hidden="false"和focusable="false"，否则可能被跳过或干扰键盘导航 - 内容必须是纯文本，不能含 HTML 标签，且只在 SVG 被聚焦（Tab 进入）或读屏软件主动读取时生效
例如：
<svg viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <title>下载文件</title> <path d="M..." /> </svg>这种写法对键盘用户和读屏软件有效，但桌面端 Chrome/Firefox 依然不显示悬停气泡——别指望它“顺便”实现视觉提示。
想要稳定悬停反馈？必须用CSS :hover + pointer-events
视觉层和语义层在 SVG 里是分离的，不能混用。要让图形响应鼠标并给出颜色、缩放或文字提示，得靠 CSS 控制事件穿透和样式变化：
- 确保目标元素（如
<path>或<circle>）有pointer-events: all，默认可能是auto或none - 避免给外层
<svg>设pointer-events: none，否则整个交互链就断了 - 用
::after伪元素+position: absolute显示提示文字，但父容器必须有position: relative，且<svg>不能设overflow: hidden - 如果 SVG 是 flex 子项，加
min-width: 0防伸缩撑开导致定位偏移
复杂提示场景必须上 JS + ARIA，title不是备选而是干扰源
当提示需要支持多行、HTML 内容、避让边缘、键盘焦点控制（Tab 进入/Escape 关闭）时，原生机制完全失效。此时title不仅没用，还会和aria-describedby冲突，导致读屏软件重复播报或跳过关键信息：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
title属性，改用data-tooltip存提示文本 - tooltip 元素必须挂载在
<body>下，避免被局部overflow: hidden截断 - 动态加载时，务必在组件卸载时手动移除 tooltip DOM，否则内存泄漏
- 最易忽略的一点：无论用哪种方案，
title都不该是唯一信息通道——它连移动端点击都不触发，纯属残障用户和键盘用户的盲区
