真正靠谱的 tooltip 需用 aria-describedby + role="tooltip" 实现语义化，JS 动态定位并监听 mouseenter/focus/blur/keydown 事件，兼顾键盘导航、屏幕阅读器支持与边界检测。
纯 CSS 实现的 title 属性提示太简陋、不支持样式和交互；用 JS 手动监听 mouseenter / mouseleave 容易漏掉焦点管理、键盘可访问性差——真正靠谱的 tooltip 要兼顾语义、样式可控、键盘导航（Tab 进出）、屏幕阅读器识别，且避免 z-index 溢出或位置错位。
用 aria-describedby + role="tooltip" 做语义化基础
浏览器原生 title 属性无法定制样式、不触发 focus 事件、对屏幕阅读器支持不稳定。正确起点是用 WAI-ARIA 标准标记关联关系：
<button aria-describedby="my-tooltip">保存</button> <div id="my-tooltip" role="tooltip" aria-hidden="true">点击后数据将同步至云端</div>
关键点：
-
aria-describedby必须指向 tooltip 元素的id，屏幕阅读器会自动读出内容 -
role="tooltip"告诉辅助技术这是浮动提示，不是普通 div -
aria-hidden="true"初始隐藏，JS 控制显隐时同步切换该属性值 - tooltip 元素不能放在 button 内部（破坏 DOM 结构），应同级或外层包裹
用 position: absolute + getBoundingClientRect() 算定位
CSS 的 top/left 固定值无法适配不同尺寸按钮或滚动位置。必须用 JS 动态计算：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const btn = document.querySelector('button');
const tooltip = document.getElementById('my-tooltip');
function updateTooltipPosition() {
const rect = btn.getBoundingClientRect();
tooltip.style.left = `${rect.left + window.scrollX}px`;
tooltip.style.top = `${rect.bottom + window.scrollY + 4}px`; // 下方 4px 间距
}
注意几个坑：
- 别直接用
offsetTop/offsetLeft：它们受父级position影响，不可靠 - 必须加上
window.scrollX/window.scrollY，否则页面滚动后 tooltip 错位 - 如果按钮在
transform容器内，getBoundingClientRect()仍准确，但需额外处理缩放偏移（少见，先忽略） - 建议加
requestAnimationFrame(updateTooltipPosition)防抖，避免频繁重排
手动控制显示逻辑，绕开 :hover 的缺陷
CSS :hover 无法响应键盘焦点（Tab 进入按钮时 tooltip 不出现），也不支持延迟显示/隐藏。必须用 JS 绑定三类事件：
btn.addEventListener('mouseenter', showTooltip);
btn.addEventListener('focus', showTooltip); // 键盘用户
btn.addEventListener('mouseleave', hideTooltip);
btn.addEventListener('blur', hideTooltip); // 失焦时隐藏
实际中还要加防抖和延迟：
- 显示前加
setTimeout（如 300ms），防止快速划过误触发 - 隐藏时用
setTimeout+clearTimeout，鼠标移出后短暂悬停仍保持显示 - tooltip 自身要监听
mouseleave并取消隐藏定时器，否则鼠标从按钮移到 tooltip 上会闪退 - 按
Esc键应关闭 tooltip（绑定document的keydown）
z-index 和 pointer-events 容易被忽略的细节
tooltip 经常被其他元素（如 header、modal）盖住，或鼠标无法移入 tooltip 内容区域：
-
z-index值不能写死，推荐用 CSS 变量统一管理：z-index: var(--z-tooltip, 1000) - tooltip 容器必须设
pointer-events: auto（默认是auto，但若父级设了none就会继承） - tooltip 内部如果有链接或按钮，确保它们能正常接收点击——不要给 tooltip 加
pointer-events: none - 移动端没有
hover，需监听touchstart触发显示，并在touchend后延迟隐藏（避免遮挡操作）
最麻烦的其实是 tooltip 边界检测：当按钮靠近视口边缘时，tooltip 会溢出。这需要判断 rect.right 是否超窗宽，再动态切到左/上/下方位。真要用，别手写，引入 @floating-ui/dom 库更稳——它专治定位、碰撞、虚拟元素、滚动跟随这些事，比自己算 margin 和 transform 可靠得多。
