气泡卡片 · popover

用户需要在里面操作，但不该被强制中断时用。

1 · 四个方向

方向用逻辑方向写的（end/start），所以在 RTL 下会自动镜像。

2 · 可以放交互内容（这是与 tooltip 的分界）

点开后焦点直接进入浮层，可以立刻操作 —— 键盘用户不用先 Tab 一路走过来。

3 · 带表单的浮层

怎么选？

组件能放交互内容背景是否锁死用在哪
tooltip❌ 只能纯文字—补充说明、术语解释
popover✅不锁筛选、快捷设置、补充表单
dialog✅锁死危险确认、必须处理完的事

记不住就问一句：「用户需要在里面操作吗？」不需要 → tooltip；需要但不打断 → popover；必须先处理完 → dialog。

反例 · 不该这样用

危险操作用 popover 是错的。
二次确认必须用 dialog（模态 + focus trap）—— 用了 popover，背景仍可点，用户很容易"顺手点掉别的东西"。
另外：popover 里只放一行说明文字也不对 —— 那是 tooltip 的活。

对比：错写法 vs 本库写法

❌ 常见写法：两个浮层同时开着

两个都开着：点空白处到底关的是哪一个？读屏用户按 Esc 也不知道关掉的是哪个，而两个浮层的内容还叠在一起。

✅ 本库：同一时刻只开一个

popover.js 的 open() 会先关掉当前打开的那个 —— 不是"约定"，是写死在实现里的。