FEEDBACK & OVERLAY
气泡浮层Popover
带小三角指向触发源的富内容浮层，可以装标题、正文甚至按钮。
效果预览
✦ 新功能：自动化流
把重复操作录制成流程，一键执行。现在就来试试。
适合用在哪
功能导览（Onboarding）、头像菜单、日历日期详情、帮助气泡。
容易踩的坑
- 定位写死在下方，触发元素靠近视口底部或边缘时浮层被裁切到屏幕外。
- 浮层内有按钮却在鼠标离开触发元素时就关闭，用户根本移不过去点击。
- 打开后焦点不进入浮层，键盘用户无法操作里面的链接和按钮。
设计提示词 · Prompt
气泡浮层（Popover）：出现位置锚定触发元素（上/下/左/右四个方位），带一枚 9px 旋转 45° 的小三角指向源头。内容比 tooltip 丰富：标题 + 两行描述 + 可选操作按钮。白底 + 1px 描边 + 16px 圆角 + 大投影，入场 scale .96→1 + 淡入 150ms。点击外部区域关闭、Esc 关闭。新手引导场景（Onboarding）常与半透明遮罩组合，遮罩上挖洞露出目标元素——即 Spotlight 引导。
Popover: positioned anchored to the trigger element (four placements: top/bottom/left/right), with a 9px small triangle rotated 45° pointing to the source. Richer content than a tooltip: title + two lines of description + optional action button. White background + 1px border + 16px border radius + large shadow, entering with scale .96→1 + fade-in 150ms. Clicking outside closes it, Esc closes it. In onboarding scenarios it is often combined with a semi-transparent overlay that has a hole cut out to reveal the target element — i.e. Spotlight onboarding.
常见搭配
同一页面里经常和「气泡浮层」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-popstage">
<div class="d-pop">
<b>✦ 新功能：自动化流</b>
<p>把重复操作录制成流程，一键执行。现在就来试试。</p>
<button class="d-btn d-btn--p d-btn--sm">开启引导</button>
</div>
<button class="d-btn d-btn--g d-popstage__btn">自动化流</button>
</div>