字段悬停说明
灵感：能力工具箱 tippy-hover（tippy.js 为字段提供悬停说明）。
> 小四原创：字段旁图标 → tippy content → 卸载 destroy。
> 内容用纯文本或可信 HTML，勿注入未消毒用户输入。
何时使用
- 商机表单难懂字段旁「？」说明
- Demo 指标释义悬停
- 列表表头简短帮助
硬约束
- 依赖：
tippy.js（及官方 CSS）。 - 每个实例卸载必须
destroy()。 - 默认
placement: 'top'，移动端可改trigger: 'click'。 - 实现要点注释标 小四原创。
- 不做全站 Tour（可用 driver.js 等另 Skill）。
推荐实现
import tippy, { type Instance } from 'tippy.js'
import 'tippy.js/dist/tippy.css'
// 小四原创：字段帮助气泡
export function mountFieldHint(
el: HTMLElement,
content: string,
opts?: { placement?: 'top' | 'right' | 'bottom' | 'left' },
): { destroy: () => void } {
const inst: Instance = tippy(el, {
content,
allowHTML: false,
placement: opts?.placement ?? 'top',
theme: 'light-border',
delay: [80, 40],
})
return { destroy: () => inst.destroy() }
}
Agent 步骤
npm i tippy.js；引入 CSS。- 字段 label 旁挂载帮助图标，绑定说明文案。
onBeforeUnmount调destroy。- 自测：悬停出现文案；卸载后无残留节点。
不要做
allowHTML: true却塞入未消毒用户内容。- 忘记 destroy 导致内存泄漏。
附加
- README.md · reference.md · templates/usage.md
