## 介绍 可以理解为最轻量的弹窗，非模态，用户可以更好的查看上下文的信息。 尺寸也不建议太大，否则就该考虑其他形式了，例如抽屉。 - [气泡卡片 Popover - Ant Design](https://ant.design/components/popover-cn/#header) - 点击/鼠标移入元素，弹出气泡式的卡片浮层。 - 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。 - 和 [[工具提示 Tooltips]] 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。 - [[Lightning Design System]] - 弹出窗口是非模态对话框，它向用户提供关于画布元素的上下文信息和操作，并向用户提供关于错误和警告的消息。 - [Popovers - Windows and Views - macOS - Human Interface Guidelines - Apple Developer](https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/popovers/) - A popover is a view that appears above other content onscreen when you click a control or view. For example, Calendar displays information in a popover when you double-click an event. Typically (通常) , a popover includes an arrow pointing to the location from which it emerged (出现) . Popovers also support [vibrancy](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/translucency/) . ## 最佳实践 ### Do #### Cloudspace - 使用泡芙只提供补充的，非必要的信息。用户应该能够在不查看弹出窗口内容的情况下完成相关任务。 - 当链接或交互式元素包含在内容区域中时，始终显示一个解除按钮。 - 弹出窗口只能通过用户点击或点击文本或按钮来触发。 ### Don't - 不要使用泡芙来提供帮助内容。请遵循帮助系统的指导方针。 - 不要在禁用的元素上使用泡芙，因为禁用的元素不应该是交互式的。 - 这个不敢苟同，否则如何解释为何禁用？hubspot就在禁用元素用交互。 #我的备注 - 不要对需要用户长时间阅读大量文本或集中注意力的内容使用泡芙。相反，使用模式可以更好地集中用户的注意力。 - 不要从 popover 中启动 modal。 - Don't launch a popover from within a popover. - 不要在弹出窗口中包含信息链接，而是在页面级别提供帮助内容。 - 同样不敢苟同，我觉得hubspot那个案例不错。[[关于禁用功能的思考？#^5d50ed]] #我的备注