#Popover

用于显示锚定到触发元素的上下文内容的弹出框组件。

#结构

<Popover.Root>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Popup>
    <Popover.Arrow />
    Content
  </Popover.Popup>
</Popover.Root>

#行为

显示锚定到触发元素的上下文内容。默认情况下，点击打开，点击外部、按下 Escape 或触发器失去焦点时关闭。

设置 openOnHover 可在指针悬停时打开而非点击。使用 delay 和 closeDelay 控制悬停交互的时序。

side 和 align 属性控制弹出框相对于触发器的位置。弹出框会自动重新定位以保持在视口边界内。

在 React 中，组件由四个部分组成：Root 管理状态，Trigger 切换弹出框，Popup 包含内容，Arrow 渲染方向箭头。

#样式

使用 CSS 自定义属性设置定位偏移：

.popover {
  --media-popover-side-offset: 8px;
  --media-popover-align-offset: 0px;
}

根据打开状态和过渡阶段设置样式：

.popover[data-open] .popup {
  display: block;
}
.popover[data-starting-style] .popup {
  opacity: 0;
}
.popover[data-ending-style] .popup {
  opacity: 0;
}

#无障碍

触发器接收反映打开状态的 aria-expanded。当设置 modal 时，弹出框接收 aria-modal="true"。默认启用通过 Escape 关闭，可通过 closeOnEscape={false} 禁用。

#示例

#基本用法

import { Popover } from '@videojs/react';

function Menu() {
  return (
    <Popover.Root>
      <Popover.Trigger>Settings</Popover.Trigger>
      <Popover.Popup>
        <Popover.Arrow />
        <p>Menu content here</p>
      </Popover.Popup>
    </Popover.Root>
  );
}

#API 参考

#Popover.Root 属性

#状态

#Data 属性

#CSS 自定义属性

#参见

• Tooltip - 工具提示
• Controls - 控件容器