Skip to main content
Popover is a compound component that displays contextual content anchored to a trigger element. By default it opens on click and closes when clicking outside, pressing Escape, or when focus moves away.

​
Sub-components

ComponentDescription
Popover.RootManages popover state and provides context to child components.
Popover.TriggerThe element that toggles the popover open/closed on click.
Popover.PopupThe popover popup container with content.
Popover.ArrowOptional decorative arrow pointing to the trigger.

​
Import

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

​
Basic Usage

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

function PlayerControls() {
  return (
    <Popover.Root>
      <Popover.Trigger render={<PlaybackRateButton />} />
      <Popover.Popup className="popover-popup">
        <ul>
          <li>0.5x</li>
          <li>1x</li>
          <li>1.5x</li>
          <li>2x</li>
        </ul>
      </Popover.Popup>
    </Popover.Root>
  );
}

​
Open on Hover

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

function VolumeControl() {
  return (
    <Popover.Root openOnHover delay={200} closeDelay={300}>
      <Popover.Trigger>
        <button>Volume</button>
      </Popover.Trigger>
      <Popover.Popup className="volume-popup">
        {/* VolumeSlider */}
      </Popover.Popup>
    </Popover.Root>
  );
}

​
Popover.Root Props

​
open
boolean
Controlled open state. When provided, the component operates in controlled mode.
​
defaultOpen
boolean
Initial open state for uncontrolled usage. Defaults to false.
​
openOnHover
boolean
When true, the popover opens on pointer hover instead of click. Defaults to false.
​
delay
number
Milliseconds before the popover opens on hover (when openOnHover is enabled). Defaults to 0.
​
closeDelay
number
Milliseconds before the popover closes after the pointer leaves (when openOnHover is enabled). Defaults to 0.
​
closeOnEscape
boolean
Whether pressing Escape closes the popover. Defaults to true.
​
closeOnOutsideClick
boolean
Whether clicking outside the popover closes it. Defaults to true.
​
onOpenChange
(open: boolean, details: PopoverChangeDetails) => void
Called when the open state changes. Fires immediately, before animations complete.
​
onOpenChangeComplete
(open: boolean) => void
Called after open/close animations complete.
​
children
ReactNode
Popover.Trigger, Popover.Popup, and optionally Popover.Arrow elements.

​
State Data Attributes

These attributes are reflected on the Popover.Popup element.
AttributeValue / Description
data-openPresent when the popover is open.
data-side"top" | "bottom" | "left" | "right" — current placement side.
data-align"start" | "center" | "end" — current alignment.
data-starting-stylePresent during the open animation.
data-ending-stylePresent during the close animation.

​
CSS Styling Example

.popover-popup {
  display: none;
  background: #1a1a1a;
  border-radius: 8px;
  padding: 8px;
  --media-popover-side-offset: 8px;
}

.popover-popup[data-open] {
  display: block;
}

.popover-popup[data-starting-style],
.popover-popup[data-ending-style] {
  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}.

Build docs developers (and LLMs) love

Get started for freeTalk to us