media-popover

A popover component for displaying contextual content anchored to a trigger

Anatomy

<media-popover>
  <button>Open</button>
  <div>Content</div>
</media-popover>

Behavior

Displays contextual content anchored to a trigger element. By default, opens on click and closes when clicking outside, pressing Escape, or when the trigger loses focus.

Set openOnHover to open on pointer hover instead of click. Use delay and closeDelay to control timing for hover interactions.

The side and align props control popup placement relative to the trigger. The popup repositions automatically to stay within viewport bounds.

In HTML, the media-popover element wraps a trigger (first child button) and popup content (second child). The element manages open/close state and positioning automatically.

Styling

Use CSS custom properties for positioning offsets:

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

Style based on open state and transition phases:

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

Accessibility

The trigger receives aria-expanded reflecting the open state. When modal is set, the popup receives aria-modal="true". Closing via Escape is enabled by default and can be disabled with closeOnEscape={false}.

Examples

Basic Usage

<video-player class="html-popover-basic">
    <media-container>
        <video
            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
            autoplay
            muted
            playsinline
            loop
        ></video>
        <div class="html-popover-basic__bar">
            <button type="button" commandfor="popover-demo" class="html-popover-basic__trigger">Settings</button>
            <media-popover id="popover-demo" class="html-popover-basic__popover">
                <div class="html-popover-basic__popup">
                    Popover content
                </div>
            </media-popover>
        </div>
    </media-container>
</video-player>

.html-popover-basic,
.html-popover-basic media-container {
  display: block;
  position: relative;
}

.html-popover-basic video {
  width: 100%;
}

.html-popover-basic__bar {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.html-popover-basic__trigger {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  color: black;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  cursor: pointer;
}

.html-popover-basic__popover {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  color: white;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  white-space: nowrap;
}

import '@videojs/html/video/player';
import '@videojs/html/ui/popover';

API Reference

media-popover

Props

Prop	Type	Default
`align`	`'start' \| 'center' \| 'end'`	`'center'`
Attribute `align` Description Alignment of the popup along the trigger's edge.
`closeDelay`	`number`	`0`
Attribute `close-delay` Description Delay in ms before closing after pointer leaves.
`closeOnEscape`	`boolean`	`true`
Attribute `close-on-escape` Description Close the popup when the Escape key is pressed.
`closeOnOutsideClick`	`boolean`	`true`
Attribute `close-on-outside-click` Description Close the popup when clicking outside the trigger and popup.
`defaultOpen`	`boolean`	`false`
Attribute `default-open` Description Initial open state for uncontrolled usage.
`delay`	`number`	`300`
Attribute `delay` Description Delay in ms before opening on hover.
`modal`	`boolean \| 'trap-focus'`	`false`
Attribute `modal` Description `false` (default): non-modal; background content remains interactive. `true`: modal; sets `aria-modal="true"` on the popup. `'trap-focus'`: reserved for future focus-trapping behavior.
`open`	`boolean`	`false`
Attribute `open` Description Controlled open state. When set, the consumer is responsible for toggling.
`openOnHover`	`boolean`	`false`
Attribute `open-on-hover` Description Open the popup on pointer hover instead of click.
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Attribute `side` Description Which side of the trigger the popup appears on.

State

State is reflected as data attributes for CSS styling.

Property	Type	Details
`open`	`boolean`
`status`	`'idle' \| 'starting' \| 'ending'`
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`
`align`	`'start' \| 'center' \| 'end'`
`modal`	`boolean \| 'trap-focus'`
`transitionStarting`	`boolean`
Description Whether the open transition is in progress.
`transitionEnding`	`boolean`
Description Whether the close transition is in progress.

Data attributes

Attribute	Type	Details
`data-open`
Description Present when the popover is open.
`data-side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Indicates which side the popover is positioned relative to the trigger.
`data-align`	`'start' \| 'center' \| 'end'`
Description Indicates how the popover is aligned relative to the specified side.
`data-starting-style`
Description Present when the open transition is in progress.
`data-ending-style`
Description Present when the close transition is in progress.

CSS custom properties

Variable	Details
`--media-popover-side-offset`
Description Distance between the popup and the trigger along the side axis.
`--media-popover-align-offset`
Description Distance between the popup and the trigger along the alignment axis.
`--media-popover-anchor-width`
Description The anchor element's width.
`--media-popover-anchor-height`
Description The anchor element's height.
`--media-popover-available-width`
Description Available width between the trigger and the boundary edge.
`--media-popover-available-height`
Description Available height between the trigger and the boundary edge.