Popover API 已进入基线

使用集合保持井井有条 根据您的偏好保存内容并对其进行分类。

Una Kravets

正在发生！我最期待的功能之一刚刚在所有现代浏览器中推出，并正式成为 Baseline 2024 的一部分。此功能就是 Popover API。Popover 为构建分层界面（如工具提示、菜单、教学 UI 等）提供了许多出色的原语和开发者便利。

以下是 popover 功能的一些快速亮点

• 提升到顶层。 Popover 将显示在页面的其余部分的顶层之上，因此您无需摆弄 z-index。
• 轻度关闭功能。 点击 popover 区域外部将关闭 popover 并返回焦点。
• 默认焦点管理。 打开 popover 会使下一个 Tab 键停留在 popover 内部。
• 无障碍键盘绑定。 按下 esc 键或双击切换将关闭 popover 并返回焦点。
• 无障碍组件绑定。 将 popover 元素语义化地连接到 popover 触发器。

创建 popover

创建 popover 非常简单。要使用默认值，您只需要一个 button 来触发 popover，以及一个要触发的元素。

• 首先，在将要作为 popover 的元素上设置 popover 属性。
• 然后，在 popover 元素上添加唯一的 id。
• 最后，要将按钮连接到 popover，请将按钮的 popovertarget 设置为 popover 元素的 id 值。

以下代码显示了这一点

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

要更精细地控制 popover，您可以显式设置 popover 的类型。例如，使用不带值的裸 popover 属性与 popover="auto" 相同。auto 值启用轻度关闭行为并自动关闭其他 popover。使用 popover="manual"，您将需要添加一个关闭按钮，手动 popover 不会关闭其他 popover，也不允许用户通过在 UI 中点击外部区域来关闭 popover。您可以使用以下方法创建手动 popover

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Popover 与模态对话框

您可能想知道当对话框存在时是否需要 popover，答案是：您可能不需要。

重要的是要注意，popover 属性本身不提供语义。虽然您现在可以使用 popover 构建类似模态对话框的体验，但两者之间存在一些关键差异

结论和延伸阅读

popover 为平台带来了许多令人兴奋的功能。要了解有关此 API 的更多信息，包括有关该功能的可访问性的更多信息，以及有关功能集的文档，以下是一些建议阅读的更多信息

• Hidde de Vries 的语义和 popover 属性：何时使用？
• Hidde de Vries 关于 popover 可访问性的文章：浏览器的作用和不作为
• MDN 上关于 popover 的文档