title属性虽简单但有局限：无法自定义样式、不支持HTML和换行、移动端失效、Firefox中可能被屏幕阅读器忽略；正式项目应避免依赖它，改用CSS+data-*或JavaScript方案，并注重可访问性和移动端适配。
title 属性是最简单但有局限的气泡提示
直接加 title 属性确实能触发浏览器原生 tooltip，比如 ，鼠标悬停就会显示文字。但它的问题很实际：无法控制样式、不能含换行或 HTML、移动端基本不触发、在 Firefox 中可能被屏幕阅读器忽略。
如果你只要快速验证逻辑、内部工具凑合用，title 能省事；但正式项目里别依赖它做用户可见提示。
用 CSS + data-* 实现轻量可控的 tooltip
纯 CSS 方案不需要 JS，适合静态内容提示。核心是利用 :hover 和 ::after 伪元素，配合 data-tip 存储提示文本：
<span class="tooltip" data-tip="Ctrl+Shift+S 快速导出">导出</span>
<p>.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.tooltip:hover::after {
opacity: 1;
}</p>
注意几个关键点：
-
position: relative是必须的，否则::after会相对 body 定位 -
pointer-events: none防止 tooltip 遮挡下方元素导致 hover 中断 - 如果提示内容过长，
white-space: nowrap会溢出，改用max-width+word-break: break-word - IE11 不支持
attr(data-*)用于content，需降级为固定文本或加 JS 回退
需要交互或动态内容？用 JavaScript 控制 tooltip 显示
当提示要带按钮、加载状态、或根据用户权限动态生成时，CSS 方案就不够了。推荐用原生 JS 管理一个浮动 常见坑： 把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。 气泡提示不是装饰，而是信息补充。WCAG 要求：提示内容必须能被屏幕阅读器读取，且不能仅靠 hover 触发。 实操建议： tooltip 看似简单，但真要兼顾样式、交互、性能、可访问性，往往得组合 CSS 定位 + JS 生命周期管理 + a11y 属性，而不是抄一段代码就完事。${rect.left + window.scrollX}px
window.scrollX/window.scrollY
event.currentTarget 或委托到父容器更稳妥setTimeout 延迟显示focusin 和 blur
别忽略可访问性（a11y）和移动端适配
aria-describedby="tip-id"，再对应放一个 touchstart 并延迟显示（避免误触），或改用点击展开
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
