要实现点击展开、悬停关闭的混合触发，需设trigger:'manual'，绑定click调用show()，监听mouseleave加settimeout延迟hide()，并启用interactive:true；否则鼠标移入即关闭。
直接用 tippy() 初始化就能创建基础工具提示，但要实现“功能丰富”的弹出菜单（比如带交互、延迟控制、键盘导航、嵌入表单），必须主动配置 plugins、trigger、interactive 和 placement 等关键参数——默认行为只适合静态提示，一动就失效。
如何让弹出层支持点击展开 + 鼠标悬停关闭（常见混合触发）
Tippy 默认的 trigger: 'mouseenter focus' 无法满足“点击打开、悬停保持、移出关闭”这种组合逻辑。必须手动拆解：
- 把触发方式设为
trigger: 'manual'，完全交由 JS 控制显隐 - 给目标元素绑定
click事件调用instance.show() - 对弹出层自身监听
mouseleave，并用setTimeout延迟调用instance.hide()（避免误关） - 同时监听
document的click，判断点击是否在弹出层外，是则关闭
漏掉 interactive: true 就会导致鼠标移入弹出层时立刻触发 mouseleave 关闭，这是新手最常踩的坑。
为什么点击弹出菜单里的按钮没反应？
因为 Tippy 默认把 popper 元素插入到 body 底部，脱离了原始 DOM 上下文。如果按钮绑定了 onclick 行内处理器或依赖父级 data- 属性，会因作用域丢失而失效。
- 改用事件委托：在
document或容器上监听click，用e.target.matches('.menu-btn')判断 - 或在
onShow回调里动态绑定事件，onHide里用.removeEventListener()清理 - 避免在
content字符串里写onclick="doSomething()"—— 函数作用域通常不存在
另外，allowHTML: true 必须显式开启，否则含标签的字符串会被转义，按钮根本渲染不出来。
如何让工具提示支持键盘导航（Tab / Esc）？
Tippy 自带 focusable 和 arrow 插件，但默认不启用键盘交互。要支持 Tab 进入弹出层、Esc 关闭，需组合配置：
- 设置
focusable: true，确保弹出层能被聚焦 - 添加
aria: true，自动生成 ARIA 属性（如aria-labelledby） - 使用
plugins: [tippy.plugins.focus]（v6+）或升级到 v7 启用内置焦点管理 - 手动监听
keydown：在onShow中为弹出层添加keydown监听器，匹配e.key === 'Escape'时调用instance.hide()
注意：若弹出层内有多个可聚焦元素（如输入框、按钮），需自行实现 Tab 键循环聚焦逻辑，Tippy 不处理内部焦点流转。
移动端长按触发和触摸穿透问题怎么解？
在 iOS Safari 或 Android Chrome 上，mouseenter 几乎无效，click 又有 300ms 延迟。正确做法是用 trigger: 'click' + touch: true（v6.5+），它会自动兼容 touchstart 并禁用延迟。
-
touch: 'hold'可启用长按触发（类似原生长按菜单） - 务必设置
hideOnClick: false，否则点击弹出层内任何位置都会关闭——这与桌面端行为不一致 - 如果页面用了
position: fixed导航栏，弹出层可能被遮挡，需检查zIndex和父容器transform是否产生新层叠上下文
最易忽略的是：iOS 上弹出层首次打开时，若内容含 input，软键盘弹出会强制滚动页面，导致弹出层错位。此时得监听 resize 事件并调用 instance.popperInstance?.update() 强制重定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
