code标签不支持tooltip，需用span+title（有兼容性问题）或data-tip+CSS（轻量可控），复杂交互须JS浮层，非必要提示应改用details或文档结构。
标签本身不支持添加提示信息（tooltip），它只是语义化标记一段行内代码，浏览器不会为它自动渲染悬浮提示。想在 <code> 周围加提示，必须借助其他机制。 <h3>直接用 title 属性最简单但有硬伤</h3> <p>你可以把 <code> 包在普通行内元素里，再加 <code>title：
<span title="console.log() 是浏览器调试常用方法"><code>console.log()</code></span>
这确实能触发原生 tooltip，但问题明显：
- 移动端几乎不响应 hover，iOS Safari 完全不显示
- 提示内容含
"、<、换行符时容易解析失败或截断 - 屏幕阅读器读取行为不一致，WCAG 2.1 不推荐依赖
title做关键说明 - 样式完全不可控，无法调整字体、背景、箭头或停留时长
用 data-tip + CSS ::after 实现轻量可控提示
这是目前最实用的静态方案：不依赖 JS，样式可定制，兼容性好（IE11+）。
写法分两步：
立即学习“前端免费学习笔记（深入）”；
- 给包裹
的容器加 <code>data-tip属性：<span data-tip="输出到浏览器控制台"><code>console.log()</code></span> - 用 CSS 的
::after和:hover渲染提示框：span[data-tip]:hover::after设置content: attr(data-tip)
注意要点：
- 必须设置
position: relative在父容器上，否则::after定位会错乱 - 提示文字不能含 HTML，
attr()只取纯文本；如需富文本，得换 JS 方案 - 小屏设备（
max-width: 768px）建议禁用:hover，改用点击展开
复杂提示必须用 JavaScript 浮层（比如带链接或动态内容）
当提示需要以下任一能力时，title 和 data-tip 都不够用：
- 包含可点击的链接或按钮
- 根据当前代码上下文动态生成内容（比如查 API 获取函数签名）
- 支持键盘焦点、ESC 关闭、焦点循环等可访问交互
- 精准定位（避开边缘、自动翻转方向）
此时应使用真实 DOM 元素 + JS 控制，例如：
- 监听
mouseenter创建<div class="tooltip">并插入 body - 用
getBoundingClientRect()计算<code>位置，再设置浮层top/left - 务必监听
mouseleave和focusout清理浮层，否则残留 DOM 会堆积
别把提示塞进 title 再用 JS 读取——既绕路又丢语义，还破坏无障碍。
真正容易被忽略的一点：很多所谓“代码提示”，其实不该挂在 标签上。比如函数用途、参数说明、兼容性列表，更适合放在 <code><details><summary> 折叠区，或文档侧边栏里。强行让每个 都带 tooltip，只会让页面扫读成本飙升。
