原生html用title属性最简单但样式和交互受限；自定义tooltip需css+js配合，用data-tooltip存内容、真实dom节点动态定位，并支持aria、触控、键盘焦点及ssr降级。

HTML元素怎么绑定tooltip文字

原生 HTML 的 title 属性最简单，鼠标悬停就出提示，但样式不可控、延迟固定、不支持换行或富文本。真要自定义样式和交互，必须用 CSS + JavaScript 配合实现。

核心思路是：给目标元素加 data-tooltip 属性存提示内容，用伪元素或额外 <div> 渲染提示框，再靠 JS 控制显隐和定位。 <ul> <li> <code>title 仅适合快速调试或内部工具，生产环境别依赖它

避免用 hover 纯 CSS 实现（移动端不触发、焦点管理差）

提示框的 position 推荐用 absolute + JS 动态计算，比 fixed 更易对齐触发元素

用 CSS 伪元素写 tooltip 为什么经常错位

常见写法是给触发元素设 position: relative，再用 ::after 生成提示框。问题在于：伪元素无法获取自身尺寸，导致 top/left 偏移量写死后，在不同字号/缩放下全乱套。

更可靠的做法是用真实 DOM 节点（比如 <div class="tooltip-popup">），JS 调用 <code>getBoundingClientRect() 拿到触发元素位置，再动态设置 style.left 和 style.top。

• 伪元素 tooltip 在 Safari 下可能不响应 pointer-events: none，导致遮挡点击
• 如果触发元素有 transform，getBoundingClientRect() 仍返回视觉位置，但伪元素的 top/left 是相对父容器的，容易偏差
• 移动端需额外监听 touchstart，且要考虑点击穿透——提示框出现后，手指抬起来不该触发下方按钮

如何让 tooltip 支持键盘焦点和屏幕阅读器

纯 hover 的 tooltip 对键盘用户和读屏软件完全不可见。必须把提示逻辑和 focus/blur 绑定，并暴露 ARIA 属性。

关键操作：aria-describedby 指向提示框 ID，提示框本身加 role="tooltip" 和 aria-hidden="true"（隐藏时）或移除（显示时）。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 不要只监听 mouseenter，也要监听 focusin；隐藏时对应 mouseleave + focusout
• 用 setTimeout 延迟隐藏（比如 300ms），防止鼠标划过多个元素时闪烁
• 提示框内容若含链接或按钮，需确保 tabindex="-1" 并手动管理焦点流

React/Vue 项目里复用 tooltip 组件要注意什么

框架里封装 tooltip 最容易踩的坑是事件绑定时机和销毁。比如在 useEffect 里挂监听，但组件卸载后异步回调还在执行 setState，报 “Can’t perform a React state update on an unmounted component”。

Vue 的 v-tooltip 类指令也得注意：如果触发元素是 v-if 控制显隐，tooltip 实例可能没及时清理，导致内存泄漏。

• React 中用 useRef 存储定时器 ID 和 DOM 引用，useEffect 清理函数里 clearTimeout + removeEventListener
• 避免在 tooltip 内部渲染重型子组件（如图表），用 lazy 或 shouldComponentUpdate 控制更新
• SSR 场景下，服务端不执行 JS，title 属性仍是 fallback 必选项

真正难的不是显示一个框，而是让它在各种缩放、高对比度模式、触控、键盘导航下都“不突兀”。大部分 bug 出现在边界场景——比如窗口 resize 后提示框没重定位，或者 tooltip 遮住了表单校验红字。这些细节比动画效果重要得多。