title属性无法响应点击事件，仅支持hover和键盘焦点；点击提示需用JS控制显隐，通过data-tip属性与事件委托实现复用，并注意可访问性（role/aria-hidden）和残留清理。

点击区域用 title 属性行不通

直接给 <div>、<code><span></span> 或带 onclick 的容器加 title，鼠标悬停时确实会出提示，但**点击本身不会触发任何提示行为**——title 仅响应 hover 和键盘焦点（部分浏览器），和 click 事件无关。很多开发者误以为“点了就能弹”，结果测试时发现毫无反应，根源就在这儿。

真正能响应点击的提示，得靠 JS 控制显隐

核心思路是：准备一个隐藏的提示元素（比如 <div class="tooltip">），点击目标区域时计算位置并显示它；再监听全局点击，点到别处就收起。关键细节包括： <ul> <li> <code>getBoundingClientRect() 比 offsetTop/Left 更可靠，能准确拿到相对于视口的位置

提示框 position 必须设为 absolute 或 fixed，否则定位失效

一定要加 z-index，否则可能被父容器的 overflow: hidden 剪掉

移动端需额外处理：iOS Safari 对 click 有 300ms 延迟，建议用 touchstart 替代，或加 cursor: pointer 激活快速点击

多个可点击区域共用一套提示逻辑？用 data-tip + 事件委托

避免为每个区域写独立的 getElementById 和绑定逻辑。推荐统一加 data-tip 属性，用事件委托一次搞定：

<div class="clickable" data-tip="这是第一个区域的说明">区域一</div>
<div class="clickable" data-tip="这是第二个区域的说明">区域二</div>
<div id="shared-tooltip" class="tooltip"></div>

JS 部分只需监听父容器，提取 e.target.dataset.tip 并填入提示框内容即可。注意：data-tip 值不能含 HTML 标签，否则需用 textContent 赋值，防止 XSS。

立即学习“前端免费学习笔记（深入）”；

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

容易被忽略的可访问性与残留问题

提示框不是弹出就完事了。两个硬伤常被跳过：

• 没加 role="tooltip" 和 aria-hidden="true"，屏幕阅读器无法识别它是临时浮层，可能重复朗读或跳过
• 用户快速连点后切换页面，或在提示框显示时刷新，display: none 的清理逻辑没执行，导致提示框“卡”在屏幕上不消失

真正在意体验的项目，得在 beforeunload 或组件卸载时手动清空提示框状态，而不是只依赖 click 外部隐藏。