Hint.css 的 data-hint 必须直接写在触发元素上，不支持父容器；气泡默认从上方弹出，需用 data-hint-side 指定方向；不支持 JS 动态更新提示文本；IE11 对 emoji 和中文定位异常。
Hint.css 的 data-hint 属性必须写在触发元素上，不能套在父容器里
很多人把提示内容塞进一个 div 包裹层，然后给这个包裹层加 data-hint，结果悬停没反应——因为 Hint.css 只监听带 data-hint 的**直接触发元素**，不支持委托或祖先匹配。
正确做法是把属性贴到实际要悬停的元素上，比如按钮、链接、图标：
<button data-hint="保存当前设置">?</button>
- 支持内联元素（
a、span）、可交互元素（button、input），但对div默认无效（需加tabindex="0"才能获得焦点和悬停） - 如果用了
display: inline-block或position: relative的div，记得手动加tabindex="0"，否则 CSS 的:hover无法触发 -
data-hint值里可以含空格和中文，但不要用换行符——Hint.css 不做白名单过滤，换行会破坏气泡定位
气泡方向靠 data-hint-side 控制，但默认值不是 auto，而是 top
文档没明说，但源码里 data-hint-side 的 fallback 是 top。这意味着：没显式设方向时，所有提示都从元素上方弹出，容易被遮挡或挤出视口。
常见适配建议：
立即学习“前端免费学习笔记（深入）”；
- 右侧操作栏图标 → 用
data-hint-side="left" - 表格最后一列操作按钮 → 优先
data-hint-side="right"，避免覆盖相邻单元格 - 顶部导航条 → 改成
data-hint-side="bottom"，防止挡住下拉菜单 - 移动端慎用
data-hint-side="bottom"：iOS Safari 的 hover 模拟行为不稳定，可能点一下才出现，再点才消失
Hint.css 不支持动态更新 data-hint 值，JS 修改后不会重渲染气泡
这是纯 CSS 方案的天然限制：Hint.css 完全依赖属性初始值 + CSS 伪元素生成内容，没有 JS 监听器。你用 JS 改了 data-hint，DOM 上值变了，但气泡文本还是旧的。
绕过方法只有两个：
- 强制重绘：修改完
data-hint后，立刻 toggle 一个无关 class，比如element.classList.toggle('hint-refresh')，配合 CSS 触发重排 - 替换整个元素：用
outerHTML重建带新data-hint的节点（适合低频更新） - 别试图用
content: attr(data-hint)配合 JS 动态改——它只读取初始渲染时的值，后续变更不响应
IE11 下 data-hint 中的 emoji 或宽字符会导致气泡错位
IE11 对 ch 单位和 transform: translate() 的解析有偏差，而 Hint.css 用 ch 计算气泡宽度、用 translate 微调位置。一旦提示文字含 emoji（如 ?）或中文，IE11 会低估宽度，导致气泡向左偏移甚至截断。
临时缓解方式：
- 统一用英文提示，或把 emoji 换成 Unicode 字符（如
\270F替代 ✏️） - 给
[data-hint]加font-family: sans-serif，避免 IE 拉取不一致的中文字体度量 - 不修复也行——Hint.css 本身已声明不支持 IE10 及以下，IE11 是边界情况，上线前确认业务是否真需兼容
