Skip to main content
Tooltip is a compound component that displays a short label anchored to a trigger element. It opens after a configurable delay on hover, or immediately on focus, and closes when the pointer leaves or focus moves away.

​
Sub-components

ComponentDescription
Tooltip.ProviderCoordinates open/close timing across a group of tooltips.
Tooltip.RootManages tooltip state and provides context to child components.
Tooltip.TriggerThe element that activates the tooltip on hover or focus.
Tooltip.PopupThe tooltip popup container with label content.
Tooltip.ArrowOptional decorative arrow pointing to the trigger.

​
Import

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

​
Basic Usage

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

function PlayerControls() {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger render={<PlayButton />} />
      <Tooltip.Popup className="tooltip-popup">
        Play
      </Tooltip.Popup>
    </Tooltip.Root>
  );
}

​
Grouping Tooltips

Wrap multiple tooltips in Tooltip.Provider to share a delay group. Once one tooltip becomes visible, adjacent tooltips open instantly within the timeout window, skipping the normal delay. 
import { Tooltip, PlayButton, MuteButton } from '@videojs/react';

function PlayerControls() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger render={<PlayButton />} />
        <Tooltip.Popup>Play</Tooltip.Popup>
      </Tooltip.Root>
      <Tooltip.Root>
        <Tooltip.Trigger render={<MuteButton />} />
        <Tooltip.Popup>Mute</Tooltip.Popup>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}

​
Tooltip.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.
​
delay
number
Milliseconds before the tooltip opens on hover. Defaults to 600.
​
closeDelay
number
Milliseconds before the tooltip closes after the pointer leaves. Defaults to 0.
​
disabled
boolean
Prevents the tooltip from opening.
​
disableHoverablePopup
boolean
When true, the tooltip closes immediately when the pointer leaves the trigger (even if the pointer moves into the popup).
​
onOpenChange
(open: boolean, details: TooltipChangeDetails) => void
Called when the open state changes. Fires immediately, before animations complete.
​
onOpenChangeComplete
(open: boolean) => void
Called after open/close animations complete.
​
children
ReactNode
Tooltip.Trigger, Tooltip.Popup, and optionally Tooltip.Arrow elements.

​
Tooltip.Provider Props

​
timeout
number
Time window in milliseconds during which adjacent tooltips open instantly after one has been shown. Defaults to 500.
​
children
ReactNode
Tooltip.Root elements to group together.

​
State Data Attributes

These attributes are reflected on the Tooltip.Popup element.
AttributeValue / Description
data-openPresent when the tooltip 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

.tooltip-popup {
  display: none;
  background: #000;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  --media-tooltip-side-offset: 8px;
}

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

.tooltip-popup[data-starting-style],
.tooltip-popup[data-ending-style] {
  opacity: 0;
}

​
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us