media-tooltip

A tooltip component for displaying contextual labels on hover and focus

Import

import '@videojs/html/ui/tooltip';

Anatomy

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger>Hover me</Tooltip.Trigger>
    <Tooltip.Popup>
      <Tooltip.Arrow />
      <Tooltip.Label>Label text</Tooltip.Label>
      <Tooltip.Shortcut>K</Tooltip.Shortcut>
    </Tooltip.Popup>
  </Tooltip.Root>
</Tooltip.Provider>

<media-tooltip-group>
  <button commandfor="my-tooltip">Hover me</button>
  <media-tooltip id="my-tooltip">
    <media-tooltip-label>Label text</media-tooltip-label>
    <media-tooltip-shortcut>K</media-tooltip-shortcut>
  </media-tooltip>
</media-tooltip-group>

Behavior

Displays a short label anchored to a trigger element. Opens after a configurable delay (default 600ms) on hover or immediately on focus. Closes when the pointer leaves or focus moves away, with an optional closeDelay.

The side and align props control the preferred placement relative to the trigger. When the preferred side overflows the positioning boundary, the tooltip uses the opposite side if it has more space. Positioning uses CSS Anchor Positioning where supported, with a JavaScript measurement fallback.

The <media-tooltip> element is the popup itself. Link it to a trigger using the commandfor attribute on any button, pointing to the tooltip’s id. The element discovers its trigger automatically and manages open/close state and positioning. Wrap tooltip trigger/popup pairs in <media-tooltip-group> to coordinate timing — the group’s delay, close-delay, and timeout attributes control shared timing for all contained tooltips.

Tooltips inside a Container also observe its popup group. By default, a tooltip does not open—or closes if already open—while a menu or popover attached to the same trigger is open. Set sticky when the tooltip should remain visible with that trigger’s popup. Tooltip.Provider and <media-tooltip-group> coordinate tooltip delay timing only; they do not replace the container’s popup group.

Styling

Use CSS custom properties for positioning offsets:

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

React renders standard DOM elements. Add a className to style them:

.tooltip-popup {
  --media-tooltip-side-offset: 8px;
  --media-tooltip-align-offset: 0px;
  --media-tooltip-boundary-offset: 8px;
}

Style based on open state, rendered side, and transition phases. data-side reflects the rendered side and can differ from the preferred side prop after collision handling:

media-tooltip[data-open] {
  display: block;
}
media-tooltip[data-starting-style] {
  opacity: 0;
}
media-tooltip[data-ending-style] {
  opacity: 0;
}
media-tooltip[data-side="top"] {
  transform-origin: bottom center;
}
media-tooltip[data-side="bottom"] {
  transform-origin: top center;
}

.tooltip-popup[data-open] {
  display: block;
}
.tooltip-popup[data-starting-style] {
  opacity: 0;
}
.tooltip-popup[data-ending-style] {
  opacity: 0;
}
.tooltip-popup[data-side="top"] {
  transform-origin: bottom center;
}
.tooltip-popup[data-side="bottom"] {
  transform-origin: top center;
}

Accessibility

Tooltips are visual-only, supplementary labels. The popup renders with role="presentation" and is not referenced by the trigger with aria-describedby. Give the trigger its own accessible name instead of relying on tooltip content. Built-in media buttons already expose a state-aware aria-label, and their tooltips reuse that translated label. Tooltips still open on focus so keyboard users who can see the label receive the same visual hint.

Examples

Basic Usage

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

export default function BasicUsage() {
  return (
    <div className="demo">
      <Tooltip.Root>
        <Tooltip.Trigger className="trigger">Hover me</Tooltip.Trigger>
        <Tooltip.Popup className="media-tooltip">
          <Tooltip.Arrow className="arrow" />
          <Tooltip.Label>Tooltip content</Tooltip.Label>
        </Tooltip.Popup>
      </Tooltip.Root>
    </div>
  );
}

.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

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

.media-tooltip {
  --media-tooltip-side-offset: 8px;
  padding: 4px 10px;
  margin: 0;
  font-size: 13px;
  color: white;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.85);
  border: 0;
  border-radius: 6px;
  backdrop-filter: blur(10px);
}

.arrow {
  fill: rgba(0, 0, 0, 0.85);
}

<div class="demo">
  <button type="button" commandfor="tooltip-demo" class="trigger">Hover me</button>
  <media-tooltip id="tooltip-demo" class="media-tooltip"> Tooltip content </media-tooltip>
</div>

.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

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

.media-tooltip {
  --media-tooltip-side-offset: 8px;
  padding: 4px 10px;
  font-size: 13px;
  color: white;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  backdrop-filter: blur(10px);
}

import '@videojs/html/ui/tooltip';

Grouping

Wrap multiple tooltips in a Tooltip.Provider to share a delay group. Once a tooltip becomes visible, adjacent tooltips open instantly within the timeout window, skipping the normal delay.

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

export default function Grouping() {
  return (
    <div className="demo">
      <Tooltip.Provider>
        <Tooltip.Root>
          <Tooltip.Trigger className="trigger">Play</Tooltip.Trigger>
          <Tooltip.Popup className="media-tooltip">
            <Tooltip.Arrow className="arrow" />
            <Tooltip.Label>Play video</Tooltip.Label>
          </Tooltip.Popup>
        </Tooltip.Root>
        <Tooltip.Root>
          <Tooltip.Trigger className="trigger">Mute</Tooltip.Trigger>
          <Tooltip.Popup className="media-tooltip">
            <Tooltip.Arrow className="arrow" />
            <Tooltip.Label>Mute audio</Tooltip.Label>
          </Tooltip.Popup>
        </Tooltip.Root>
        <Tooltip.Root>
          <Tooltip.Trigger className="trigger">Fullscreen</Tooltip.Trigger>
          <Tooltip.Popup className="media-tooltip">
            <Tooltip.Arrow className="arrow" />
            <Tooltip.Label>Enter fullscreen</Tooltip.Label>
          </Tooltip.Popup>
        </Tooltip.Root>
      </Tooltip.Provider>
    </div>
  );
}

.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

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

.media-tooltip {
  --media-tooltip-side-offset: 8px;
  padding: 4px 10px;
  margin: 0;
  font-size: 13px;
  color: white;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.85);
  border: 0;
  border-radius: 6px;
  backdrop-filter: blur(10px);
}

.arrow {
  fill: rgba(0, 0, 0, 0.85);
}

Wrap tooltip trigger/popup pairs in <media-tooltip-group> to coordinate timing. The group’s delay, close-delay, and timeout attributes control shared timing for all contained tooltips.

<media-tooltip-group class="demo">
  <button type="button" commandfor="tooltip-play" class="trigger">Play</button>
  <media-tooltip id="tooltip-play" class="media-tooltip">Play video</media-tooltip>

  <button type="button" commandfor="tooltip-mute" class="trigger">Mute</button>
  <media-tooltip id="tooltip-mute" class="media-tooltip">Mute audio</media-tooltip>

  <button type="button" commandfor="tooltip-fullscreen" class="trigger">Fullscreen</button>
  <media-tooltip id="tooltip-fullscreen" class="media-tooltip">Enter fullscreen</media-tooltip>
</media-tooltip-group>

.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

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

.media-tooltip {
  --media-tooltip-side-offset: 8px;
  padding: 4px 10px;
  font-size: 13px;
  color: white;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  backdrop-filter: blur(10px);
}

import '@videojs/html/ui/tooltip';
import '@videojs/html/ui/tooltip-group';

API Reference

media-tooltip-group

media-tooltip

Props

Prop	Type	Default
`align`	`'start' \| 'center' \| 'end'`	`'center'`
Attribute `align` Description Alignment of the tooltip along the trigger's edge.
`boundary`	`'viewport' \| 'container' \| string & o...`	`—`
Attribute `boundary` Description Boundary used to constrain the tooltip position. Type `'viewport' \| 'container' \| string & object`
`closeDelay`	`number`	`0`
Attribute `close-delay` Description Delay in ms before closing after pointer leaves.
`defaultOpen`	`boolean`	`false`
Attribute `default-open` Description Initial open state for uncontrolled usage.
`delay`	`number`	`600`
Attribute `delay` Description Delay in ms before opening on hover.
`disabled`	`boolean`	`false`
Attribute `disabled` Description When true, the tooltip is disabled and will not open.
`disableHoverablePopup`	`boolean`	`true`
Attribute `disable-hoverable-popup` Description When true, hovering the popup does not keep it open.
`open`	`boolean`	`false`
Attribute `open` Description Controlled open state.
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Attribute `side` Description Preferred side of the trigger for the tooltip.
`sticky`	`boolean`	`false`
Attribute `sticky` Description Whether the tooltip stays open when another popup opens from its trigger.

State

State is accessible via the render, className, and style props.

State is reflected as data attributes for CSS styling.

Property	Type	Details
`transitionStarting`	`boolean`
Description Whether the open transition is in progress.
`transitionEnding`	`boolean`
Description Whether the close transition is in progress.
`open`	`boolean`
Description Whether the tooltip is currently visible.
`status`	`'idle' \| 'starting' \| 'ending'`
Description Current phase of the transition lifecycle.
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Preferred side of the trigger for the tooltip.
`align`	`'start' \| 'center' \| 'end'`
Description How the tooltip is aligned relative to the specified side.

Data attributes

Attribute	Type	Details
`data-open`
Description Present when the tooltip is open.
`data-side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Indicates the rendered side of the tooltip after collision handling.
`data-align`	`'start' \| 'center' \| 'end'`
Description Indicates how the tooltip is aligned relative to the specified side.

CSS custom properties

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

Events

Event	Description
`open-change`	Fired when the tooltip's open state changes.

Trigger

Element that triggers the tooltip on hover and focus. Renders a <button> element.

Data attributes

Attribute	Type	Details
`data-open`
Description Present when the tooltip is open.
`data-side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Indicates the rendered side of the tooltip after collision handling.
`data-align`	`'start' \| 'center' \| 'end'`
Description Indicates how the tooltip is aligned relative to the specified side.

Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback.

Attribute	Type	Details
`data-open`
Description Present when the tooltip is open.
`data-side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Indicates the rendered side of the tooltip after collision handling.
`data-align`	`'start' \| 'center' \| 'end'`
Description Indicates how the tooltip is aligned relative to the specified side.

media-tooltip-label

Tooltip body label; defaults to context content.label from the linked trigger.

Data attributes

Attribute	Type	Details
`data-open`
Description Present when the tooltip is open.
`data-side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Indicates the rendered side of the tooltip after collision handling.
`data-align`	`'start' \| 'center' \| 'end'`
Description Indicates how the tooltip is aligned relative to the specified side.

media-tooltip-shortcut

Keyboard shortcut hint; apply skin className (CSS: media-tooltip__kbd; Tailwind: popup.tooltipShortcut).

Data attributes

Attribute	Type	Details
`data-open`
Description Present when the tooltip is open.
`data-side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Indicates the rendered side of the tooltip after collision handling.
`data-align`	`'start' \| 'center' \| 'end'`
Description Indicates how the tooltip is aligned relative to the specified side.

Import

Anatomy

Behavior

Styling

Accessibility

Examples

Basic Usage

Grouping

API Reference

Providermedia-tooltip-group

Rootmedia-tooltip

Props

State

Data attributes

CSS custom properties

Events

TriggerTrigger

Data attributes

PopupPopup

Data attributes

Labelmedia-tooltip-label

Data attributes

Shortcutmedia-tooltip-shortcut

Data attributes

ArrowArrow

media-tooltip-group

media-tooltip

Trigger

Popup

media-tooltip-label

media-tooltip-shortcut

Arrow