Tooltip

A tooltip component for displaying contextual labels on hover and focus

Anatomy

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

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 placement relative to the trigger. Positioning uses CSS Anchor Positioning where supported, with a JavaScript measurement fallback.

The component is composed from four parts: Root manages state and context, Trigger renders a button that activates the tooltip, Popup contains the label content, and Arrow renders a decorative pointer. Wrap multiple tooltips in a Tooltip.Provider to coordinate open/close timing across a group — once a tooltip becomes visible, adjacent tooltips open instantly within the timeout window, skipping the normal delay.

Styling

Use CSS custom properties for positioning offsets:

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

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

Style based on open state and transition phases:

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

The trigger receives aria-describedby pointing to the popup when open. The popup renders with role="tooltip" and popover="manual". Tooltips open on focus and close when focus leaves, ensuring keyboard-only users can access the label.

Examples

Basic Usage

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

import './BasicUsage.css';

export default function BasicUsage() {
  return (
    <div className="react-tooltip-basic">
      <Tooltip.Root>
        <Tooltip.Trigger className="react-tooltip-basic__trigger">Hover me</Tooltip.Trigger>
        <Tooltip.Popup className="react-tooltip-basic__popup">
          <Tooltip.Arrow className="react-tooltip-basic__arrow" />
          Tooltip content
        </Tooltip.Popup>
      </Tooltip.Root>
    </div>
  );
}

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

.react-tooltip-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;
}

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

.react-tooltip-basic__arrow {
  fill: rgba(0, 0, 0, 0.85);
}

<div class="html-tooltip-basic">
    <button type="button" commandfor="tooltip-demo" class="html-tooltip-basic__trigger">Hover me</button>
    <media-tooltip id="tooltip-demo" class="html-tooltip-basic__popup">
        Tooltip content
    </media-tooltip>
</div>

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

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

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';

import './Grouping.css';

export default function Grouping() {
  return (
    <div className="react-tooltip-grouping">
      <Tooltip.Provider>
        <Tooltip.Root>
          <Tooltip.Trigger className="react-tooltip-grouping__trigger">Play</Tooltip.Trigger>
          <Tooltip.Popup className="react-tooltip-grouping__popup">
            <Tooltip.Arrow className="react-tooltip-grouping__arrow" />
            Play video
          </Tooltip.Popup>
        </Tooltip.Root>
        <Tooltip.Root>
          <Tooltip.Trigger className="react-tooltip-grouping__trigger">Mute</Tooltip.Trigger>
          <Tooltip.Popup className="react-tooltip-grouping__popup">
            <Tooltip.Arrow className="react-tooltip-grouping__arrow" />
            Mute audio
          </Tooltip.Popup>
        </Tooltip.Root>
        <Tooltip.Root>
          <Tooltip.Trigger className="react-tooltip-grouping__trigger">Fullscreen</Tooltip.Trigger>
          <Tooltip.Popup className="react-tooltip-grouping__popup">
            <Tooltip.Arrow className="react-tooltip-grouping__arrow" />
            Enter fullscreen
          </Tooltip.Popup>
        </Tooltip.Root>
      </Tooltip.Provider>
    </div>
  );
}

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

.react-tooltip-grouping__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);
  cursor: pointer;
}

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

.react-tooltip-grouping__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="html-tooltip-grouping">
    <button type="button" commandfor="tooltip-play" class="html-tooltip-grouping__trigger">Play</button>
    <media-tooltip id="tooltip-play" class="html-tooltip-grouping__popup">Play video</media-tooltip>

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

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

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

.html-tooltip-grouping__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);
  cursor: pointer;
}

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

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

API Reference

Provider

Props

Prop	Type	Default
`closeDelay`	`number`	`—`
Description Default close delay in ms for tooltips in this group.
`delay`	`number`	`—`
Description Default open delay in ms for tooltips in this group.
`timeout`	`number`	`—`
Description Duration in ms after a tooltip closes during which the next tooltip opens instantly.

Root

Props

Prop	Type	Default
`align`	`'start' \| 'center' \| 'end'`	`'center'`
Description Alignment of the tooltip along the trigger's edge.
`closeDelay`	`number`	`0`
Description Delay in ms before closing after pointer leaves.
`defaultOpen`	`boolean`	`false`
Description Initial open state for uncontrolled usage.
`delay`	`number`	`600`
Description Delay in ms before opening on hover.
`disabled`	`boolean`	`false`
Description When true, the tooltip is disabled and will not open.
`disableHoverablePopup`	`boolean`	`true`
Description When true, hovering the popup does not keep it open.
`open`	`boolean`	`false`
Description Controlled open state.
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Description Which side of the trigger the tooltip appears on.

State

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

Property	Type
`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 Which side of the trigger the tooltip is positioned on.
`align`	`'start' \| 'center' \| 'end'`
Description How the tooltip is aligned relative to the specified side.
`transitionStarting`	`boolean`
Description Whether the open transition is in progress.
`transitionEnding`	`boolean`
Description Whether the close transition is in progress.

Data attributes

Attribute	Type
`data-open`
Description Present when the tooltip is open.
`data-side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Indicates which side the tooltip is positioned relative to the trigger.
`data-align`	`'start' \| 'center' \| 'end'`
Description Indicates how the tooltip 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
`--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-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.

Trigger

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

Data attributes

Attribute	Type
`data-open`
Description Present when the tooltip is open.
`data-side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Indicates which side the tooltip is positioned relative to the trigger.
`data-align`	`'start' \| 'center' \| 'end'`
Description Indicates how the tooltip 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.

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

Attribute	Type
`data-open`
Description Present when the tooltip is open.
`data-side`	`'top' \| 'bottom' \| 'left' \| 'right'`
Description Indicates which side the tooltip is positioned relative to the trigger.
`data-align`	`'start' \| 'center' \| 'end'`
Description Indicates how the tooltip 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.

Arrow

Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology.

Anatomy

Behavior

Styling

Accessibility

Examples

Basic Usage

Grouping

API Reference

Provider media-tooltip-group

Props

Root media-tooltip

Props

State

Data attributes

CSS custom properties

Trigger Trigger

Data attributes

Popup Popup

Data attributes

Arrow Arrow

Provider

Root

Trigger

Popup

Arrow