原生 title 气泡不解析 html，label 无效；自定义气泡中用 label 需确保 input 已挂载、id 唯一、避免 display: none；推荐嵌套写法提升兼容性与可访问性。

label 不能直接放进原生 tooltip 里

浏览器原生的 title 属性气泡根本不解析 HTML，写 <label for="x">点我</label> 进去，显示的就是一串字符，不是可点击标签。它连普通文本换行都支持不好，更别说语义化表单绑定。所以别在 title 里塞 label —— 它压根不会被当作标签处理，也不会触发任何 focus 或 click 行为。

自定义气泡中用 label 要确保控件可聚焦且已挂载

如果你用 JS 动态生成气泡（比如 div + innerHTML），并在里面放 <label for="xxx">确认</label><input type="checkbox" id="xxx">，得注意三点：

• id="xxx" 必须全局唯一，且不能和页面其他元素冲突
• 该 input 必须已插入 DOM，不能只存在字符串里；否则 label 点击无效
• 如果气泡是 display: none 切换的，确保显示时 input 已在文档流中（推荐用 opacity: 0 + pointer-events: none 替代）

更稳妥：用隐式包裹代替 for/id 绑定

在气泡里写 label，优先选嵌套写法，省去 id 匹配风险：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<label>
  <input type="radio" name="action" value="delete">
  删除这条记录
</label>

这种结构只要 input 在 label 内部，浏览器就自动建立关联。即使气泡是 JS 插入的，也不依赖外部 DOM 查找，兼容性更好。但注意：不要给 input 加 display: none，视觉隐藏请用 position: absolute; clip: rect(1px, 1px, 1px, 1px)，否则 label 点击会失效。

移动端和键盘用户依赖 label 的语义，不是装饰

气泡里放操作按钮时，如果用了 input[type="checkbox"] 或 input[type="radio"]，不配 label 就等于放弃键盘 Tab 导航和屏幕阅读器支持。用户按 Tab 进入气泡后，焦点停在 input 上，但没 label 就不知道这是干啥的。更糟的是，触摸屏上小控件点击区域太小，没 label 扩展点击区，用户得精准戳中像素点。这不是“锦上添花”，是让气泡功能真正可用的底线。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！