label标签需显式设置title属性才显示悬停提示，否则无任何提示；嵌图标时需阻止事件冒泡或设pointer-events: none；移动端title基本无效，应改用aria-describedby或JS方案。
label 标签加 title 属性才能显示悬停提示
label 本身不带悬停功能，必须显式设置 title 属性，否则鼠标移上去什么都不会出现。这不是浏览器兼容问题，而是规范行为——<label>用户名</label> 没有 title，就等于没写提示。
常见错误包括：
- 只用
for属性绑定input，却忘了加title - 误把说明文字塞进
alt（label不支持alt，会被完全忽略） -
title值为空格（title=" "），导致显示空白 tooltip，干扰调试
正确写法示例：<label for="email" title="请输入有效邮箱地址">邮箱</label>
label 内含图标时，悬停提示容易被误触发
当 label 里嵌了 <svg> 或 <i> 图标（比如问号图标），点击图标本意是弹出帮助浮层，但 label 的默认行为会让整个区域聚焦关联的 input，造成键盘意外弹出、光标跳转等问题。
立即学习“前端免费学习笔记（深入）”；
解决方式不是去掉 title，而是隔离事件传播：
- 给图标元素加
onclick="event.stopPropagation()"，阻止冒泡到label - 或用 CSS 设置
pointer-events: none（仅限纯装饰性图标；若图标本身需点击，则改用pointer-events: auto+ JS 控制） - 确保图标不带
tabindex，避免键盘焦点误入
注意：加了 pointer-events: none 后，该图标上的 title 也会失效——这是连带影响，得提前权衡。
移动端 label 的 title 几乎不工作
iOS Safari 和多数安卓 WebView 对 label[title] 的悬停支持极弱，触摸后基本无响应。这不是 bug，是平台设计使然：移动端没有“悬停”这一交互范式。
如果你的页面需要在手机上也提供说明，不能依赖 title：
- 改用
aria-label配合屏幕阅读器（但普通用户看不到） - 对图标类提示，用
data-tooltip+ CSS::before实现静态可见提示（无延迟、无交互，适合简单场景） - 真要交互式提示，必须引入 JS 方案（如 Tippy.js），并监听
touchstart而非mouseenter
别在响应式项目里测试完 Chrome 桌面版就上线——移动端的 title 失效率接近 100%。
label 的 title 不支持换行和样式定制
title 提示框是浏览器原生控件，不是页面 DOM 节点，因此：
-
\n在大多数浏览器中被忽略（Firefox 可能转成空格，但不可靠） - 无法用 CSS 修改背景色、字体大小、箭头位置或添加阴影
-
label[title]:hover::after这类伪元素完全无效
如果提示内容超过一行、或需要强调关键词（比如加粗“必填”），title 就不是合适载体。此时应放弃原生方案，改用 aria-describedby 指向一个隐藏的 <div role="tooltip">，再由 JS 或 CSS 控制显隐和渲染逻辑。
真正麻烦的从来不是怎么写 title，而是什么时候不该用它——尤其当设计稿里那个“小问号+两行说明+浅灰底圆角框”出现在需求文档里时。
