From 1dbcd79e541fce77021645d012fb3554d241b16b Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 12 Mar 2026 10:24:35 +1100
Subject: [PATCH] fix(skin): add missing tooltip provider/group (#902)

---
 .../html/src/define/audio/minimal-skin.css    |   1 +
 .../src/define/audio/minimal-skin.tailwind.ts | 135 ++++----
 .../html/src/define/audio/minimal-skin.ts     | 131 +++----
 packages/html/src/define/audio/skin.css       |   1 +
 .../html/src/define/audio/skin.tailwind.ts    | 119 +++----
 packages/html/src/define/audio/skin.ts        | 115 ++++---
 packages/html/src/define/shared.css           |   3 +
 .../html/src/define/video/minimal-skin.css    |   1 +
 .../src/define/video/minimal-skin.tailwind.ts | 191 ++++++-----
 .../html/src/define/video/minimal-skin.ts     | 173 +++++-----
 packages/html/src/define/video/skin.css       |   1 +
 .../html/src/define/video/skin.tailwind.ts    | 185 +++++-----
 packages/html/src/define/video/skin.ts        | 161 ++++-----
 .../presets/audio/minimal-skin.tailwind.tsx   | 220 ++++++------
 .../react/src/presets/audio/minimal-skin.tsx  | 212 ++++++------
 .../react/src/presets/audio/skin.tailwind.tsx | 206 +++++------
 packages/react/src/presets/audio/skin.tsx     | 198 +++++------
 .../presets/video/minimal-skin.tailwind.tsx   | 320 +++++++++---------
 .../react/src/presets/video/minimal-skin.tsx  | 312 ++++++++---------
 .../react/src/presets/video/skin.tailwind.tsx | 306 ++++++++---------
 packages/react/src/presets/video/skin.tsx     | 298 ++++++++--------
 packages/skins/src/default/css/audio.css      |   4 +-
 packages/skins/src/default/css/video.css      |   4 +-
 .../src/default/tailwind/audio.tailwind.ts    |  37 +-
 .../src/default/tailwind/video.tailwind.ts    |   4 +-
 packages/skins/src/minimal/css/audio.css      |   4 +-
 packages/skins/src/minimal/css/video.css      |   4 +-
 .../src/minimal/tailwind/audio.tailwind.ts    |  37 +-
 .../minimal/tailwind/components/icon-state.ts |  27 --
 .../tailwind/components/tooltip-state.ts      |  23 --
 .../src/minimal/tailwind/video.tailwind.ts    |   4 +-
 .../src/shared/{ => css}/audio/icon-state.css |   0
 .../shared/{ => css}/audio/tooltip-state.css  |   0
 .../src/shared/{ => css}/video/icon-state.css |   0
 .../shared/{ => css}/video/tooltip-state.css  |   0
 .../tailwind}/icon-state.ts                   |   4 +
 .../tailwind}/tooltip-state.ts                |   0
 37 files changed, 1688 insertions(+), 1753 deletions(-)
 create mode 100644 packages/html/src/define/shared.css
 delete mode 100644 packages/skins/src/minimal/tailwind/components/icon-state.ts
 delete mode 100644 packages/skins/src/minimal/tailwind/components/tooltip-state.ts
 rename packages/skins/src/shared/{ => css}/audio/icon-state.css (100%)
 rename packages/skins/src/shared/{ => css}/audio/tooltip-state.css (100%)
 rename packages/skins/src/shared/{ => css}/video/icon-state.css (100%)
 rename packages/skins/src/shared/{ => css}/video/tooltip-state.css (100%)
 rename packages/skins/src/{default/tailwind/components => shared/tailwind}/icon-state.ts (88%)
 rename packages/skins/src/{default/tailwind/components => shared/tailwind}/tooltip-state.ts (100%)

diff --git a/packages/html/src/define/audio/minimal-skin.css b/packages/html/src/define/audio/minimal-skin.css
index f7064f30..363d6ab8 100644
--- a/packages/html/src/define/audio/minimal-skin.css
+++ b/packages/html/src/define/audio/minimal-skin.css
@@ -1 +1,2 @@
 @import "@videojs/skins/minimal/css/audio.css";
+@import "../shared.css";
diff --git a/packages/html/src/define/audio/minimal-skin.tailwind.ts b/packages/html/src/define/audio/minimal-skin.tailwind.ts
index 53c7af22..bbb8914c 100644
--- a/packages/html/src/define/audio/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/audio/minimal-skin.tailwind.ts
@@ -29,6 +29,7 @@ import '../ui/seek-button';
 import '../ui/time';
 import '../ui/time-slider';
 import '../ui/tooltip';
+import '../ui/tooltip-group';
 import '../ui/volume-slider';
 
 const SEEK_TIME = 10;
@@ -39,79 +40,81 @@ function getTemplateHTML() {
       <slot name="media"></slot>
 
       <div class="${controls}">
-        <span class="${buttonGroup}">
-          <span class="${tooltipState.play.wrapper}">
-            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
-              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-            </media-play-button>
-            <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-              <span class="${tooltipState.play.replay}">Replay</span>
-              <span class="${tooltipState.play.play}">Play</span>
-              <span class="${tooltipState.play.pause}">Pause</span>
+        <media-tooltip-group class="contents">
+          <div class="${buttonGroup}">
+            <span class="${tooltipState.play.wrapper}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
+                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+              </media-play-button>
+              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+                <span class="${tooltipState.play.replay}">Replay</span>
+                <span class="${tooltipState.play.play}">Play</span>
+                <span class="${tooltipState.play.pause}">Pause</span>
+              </media-tooltip>
+            </span>
+
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+              <span class="${iconContainer}">
+                ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
+                <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
+              Seek backward ${SEEK_TIME} seconds
             </media-tooltip>
-          </span>
 
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-            <span class="${iconContainer}">
-              ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
-              <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
-            Seek backward ${SEEK_TIME} seconds
-          </media-tooltip>
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+              <span class="${iconContainer}">
+                ${renderIcon('seek', { class: icon })}
+                <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
+              Seek forward ${SEEK_TIME} seconds
+            </media-tooltip>
+          </div>
 
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-            <span class="${iconContainer}">
-              ${renderIcon('seek', { class: icon })}
-              <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
-            Seek forward ${SEEK_TIME} seconds
-          </media-tooltip>
-        </span>
+          <div class="${time.controls}">
+            <media-time-group class="${time.group}">
+              <media-time type="current" class="${time.current}"></media-time>
+              <media-time-separator class="${time.separator}"></media-time-separator>
+              <media-time type="duration" class="${time.duration}"></media-time>
+            </media-time-group>
 
-        <span class="${time.controls}">
-          <media-time-group class="${time.group}">
-            <media-time type="current" class="${time.current}"></media-time>
-            <media-time-separator class="${time.separator}"></media-time-separator>
-            <media-time type="duration" class="${time.duration}"></media-time>
-          </media-time-group>
-
-          <media-time-slider class="${slider.root}">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-              <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
-          </media-time-slider>
-        </span>
-
-        <span class="${buttonGroup}">
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}">
-          </media-playback-rate-button>
-          <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
-            Toggle playback rate
-          </media-tooltip>
-
-          <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
-            ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
-            ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
-            ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
-          </media-mute-button>
-
-          <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}">
-            <media-volume-slider class="${slider.root}" orientation="horizontal" thumb-alignment="edge">
+            <media-time-slider class="${slider.root}">
               <media-slider-track class="${slider.track}">
                 <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
               </media-slider-track>
-              <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
-        </span>
+              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
+            </media-time-slider>
+          </div>
+
+          <div class="${buttonGroup}">
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}">
+            </media-playback-rate-button>
+            <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
+              Toggle playback rate
+            </media-tooltip>
+
+            <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
+              ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
+              ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
+              ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
+            </media-mute-button>
+
+            <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}">
+              <media-volume-slider class="${slider.root}" orientation="horizontal" thumb-alignment="edge">
+                <media-slider-track class="${slider.track}">
+                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+          </div>
+        </media-tooltip-group>
       </div>
     </media-container>
   `;
diff --git a/packages/html/src/define/audio/minimal-skin.ts b/packages/html/src/define/audio/minimal-skin.ts
index 7b1abcfb..f012c255 100644
--- a/packages/html/src/define/audio/minimal-skin.ts
+++ b/packages/html/src/define/audio/minimal-skin.ts
@@ -13,6 +13,7 @@ import '../ui/seek-button';
 import '../ui/time';
 import '../ui/time-slider';
 import '../ui/tooltip';
+import '../ui/tooltip-group';
 import '../ui/volume-slider';
 
 const SEEK_TIME = 10;
@@ -23,77 +24,79 @@ function getTemplateHTML() {
       <slot name="media"></slot>
 
       <div class="media-controls">
-        <span class="media-button-group">
-          <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
-            ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
-            ${renderIcon('play', { class: 'media-icon media-icon--play' })}
-            ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
-          </media-play-button>
-          <media-tooltip id="play-tooltip" side="top" class="media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
-            <span class="media-tooltip-label media-tooltip-label--play">Play</span>
-            <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
-          </media-tooltip>
+        <media-tooltip-group>
+          <div class="media-button-group">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
+              ${renderIcon('play', { class: 'media-icon media-icon--play' })}
+              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="media-tooltip">
+              <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
+              <span class="media-tooltip-label media-tooltip-label--play">Play</span>
+              <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
+            </media-tooltip>
 
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-            <span class="media-icon__container">
-              ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}
-              <span class="media-icon__label">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
-            Seek backward ${SEEK_TIME} seconds
-          </media-tooltip>
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+              <span class="media-icon__container">
+                ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}
+                <span class="media-icon__label">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
+              Seek backward ${SEEK_TIME} seconds
+            </media-tooltip>
 
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-            <span class="media-icon__container">
-              ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
-              <span class="media-icon__label">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
-            Seek forward ${SEEK_TIME} seconds
-          </media-tooltip>
-        </span>
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+              <span class="media-icon__container">
+                ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
+                <span class="media-icon__label">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
+              Seek forward ${SEEK_TIME} seconds
+            </media-tooltip>
+          </div>
 
-        <span class="media-time-controls">
-          <media-time-group class="media-time">
-            <media-time type="current" class="media-time__value media-time__value--current"></media-time>
-            <media-time-separator class="media-time__separator"></media-time-separator>
-            <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
-          </media-time-group>
+          <div class="media-time-controls">
+            <media-time-group class="media-time">
+              <media-time type="current" class="media-time__value media-time__value--current"></media-time>
+              <media-time-separator class="media-time__separator"></media-time-separator>
+              <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
+            </media-time-group>
 
-          <media-time-slider class="media-slider">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
-          </media-time-slider>
-        </span>
-
-        <span class="media-button-group">
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate">
-          </media-playback-rate-button>
-          <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
-            Toggle playback rate
-          </media-tooltip>
-
-          <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
-            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
-            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
-            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
-          </media-mute-button>
-
-          <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="media-popover media-popover--volume">
-            <media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge">
+            <media-time-slider class="media-slider">
               <media-slider-track class="media-slider__track">
                 <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
               </media-slider-track>
-              <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
-        </span>
+              <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
+            </media-time-slider>
+          </div>
+
+          <div class="media-button-group">
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate">
+            </media-playback-rate-button>
+            <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
+              Toggle playback rate
+            </media-tooltip>
+
+            <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
+              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
+              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
+              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
+            </media-mute-button>
+
+            <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="media-popover media-popover--volume">
+              <media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge">
+                <media-slider-track class="media-slider__track">
+                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+          </div>
+        </media-tooltip-group>
       </div>
     </media-container>
   `;
diff --git a/packages/html/src/define/audio/skin.css b/packages/html/src/define/audio/skin.css
index d02eea76..5549ac65 100644
--- a/packages/html/src/define/audio/skin.css
+++ b/packages/html/src/define/audio/skin.css
@@ -1 +1,2 @@
 @import "@videojs/skins/default/css/audio.css";
+@import "../shared.css";
diff --git a/packages/html/src/define/audio/skin.tailwind.ts b/packages/html/src/define/audio/skin.tailwind.ts
index 2538a7a0..7d79a902 100644
--- a/packages/html/src/define/audio/skin.tailwind.ts
+++ b/packages/html/src/define/audio/skin.tailwind.ts
@@ -28,6 +28,7 @@ import '../ui/seek-button';
 import '../ui/time';
 import '../ui/time-slider';
 import '../ui/tooltip';
+import '../ui/tooltip-group';
 import '../ui/volume-slider';
 
 const SEEK_TIME = 10;
@@ -38,70 +39,72 @@ function getTemplateHTML() {
       <slot name="media"></slot>
 
       <div class="${controls}">
-        <span class="${tooltipState.play.wrapper}">
-          <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
-            ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-            ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-            ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-          </media-play-button>
-          <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.play.replay}">Replay</span>
-            <span class="${tooltipState.play.play}">Play</span>
-            <span class="${tooltipState.play.pause}">Pause</span>
+        <media-tooltip-group class="contents">
+          <span class="${tooltipState.play.wrapper}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <span class="${tooltipState.play.replay}">Replay</span>
+              <span class="${tooltipState.play.play}">Play</span>
+              <span class="${tooltipState.play.pause}">Pause</span>
+            </media-tooltip>
+          </span>
+
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+            <span class="${iconContainer}">
+              ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
+              <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
+            Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
-        </span>
 
-        <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-          <span class="${iconContainer}">
-            ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
-            <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Seek backward ${SEEK_TIME} seconds
-        </media-tooltip>
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+            <span class="${iconContainer}">
+              ${renderIcon('seek', { class: icon })}
+              <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
+            Seek forward ${SEEK_TIME} seconds
+          </media-tooltip>
 
-        <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-          <span class="${iconContainer}">
-            ${renderIcon('seek', { class: icon })}
-            <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Seek forward ${SEEK_TIME} seconds
-        </media-tooltip>
+          <media-time-group class="${time.group}">
+            <media-time type="current" class="${time.current}"></media-time>
+            <media-time-slider class="${slider.root}">
+              <media-slider-track class="${slider.track}">
+                <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
+              </media-slider-track>
+              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
+            </media-time-slider>
+            <media-time type="duration" class="${time.duration}"></media-time>
+          </media-time-group>
 
-        <media-time-group class="${time.group}">
-          <media-time type="current" class="${time.current}"></media-time>
-          <media-time-slider class="${slider.root}">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-              <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
-          </media-time-slider>
-          <media-time type="duration" class="${time.duration}"></media-time>
-        </media-time-group>
+          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
+          <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
+            Toggle playback rate
+          </media-tooltip>
 
-        <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
-        <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Toggle playback rate
-        </media-tooltip>
+          <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
+            ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
+            ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
+            ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
+          </media-mute-button>
 
-        <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
-          ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
-          ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
-          ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
-        </media-mute-button>
-
-        <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
-          <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-            </media-slider-track>
-            <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
-          </media-volume-slider>
-        </media-popover>
+          <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
+            <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
+              <media-slider-track class="${slider.track}">
+                <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+              </media-slider-track>
+              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
+            </media-volume-slider>
+          </media-popover>
+        </media-tooltip-group>
       </div>
     </media-container>
   `;
diff --git a/packages/html/src/define/audio/skin.ts b/packages/html/src/define/audio/skin.ts
index 7688bbce..ce87c479 100644
--- a/packages/html/src/define/audio/skin.ts
+++ b/packages/html/src/define/audio/skin.ts
@@ -13,6 +13,7 @@ import '../ui/seek-button';
 import '../ui/time';
 import '../ui/time-slider';
 import '../ui/tooltip';
+import '../ui/tooltip-group';
 import '../ui/volume-slider';
 
 const SEEK_TIME = 10;
@@ -23,68 +24,70 @@ function getTemplateHTML() {
       <slot name="media"></slot>
 
       <div class="media-surface media-controls">
-        <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
-          ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
-          ${renderIcon('play', { class: 'media-icon media-icon--play' })}
-          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
-        </media-play-button>
-        <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
-          <span class="media-tooltip-label media-tooltip-label--play">Play</span>
-          <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
-        </media-tooltip>
+        <media-tooltip-group>
+          <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+            ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
+            ${renderIcon('play', { class: 'media-icon media-icon--play' })}
+            ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
+          </media-play-button>
+          <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
+            <span class="media-tooltip-label media-tooltip-label--play">Play</span>
+            <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
+          </media-tooltip>
 
-        <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}
-            <span class="media-icon__label">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
-          Seek backward ${SEEK_TIME} seconds
-        </media-tooltip>
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <span class="media-icon__container">
+              ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })}
+              <span class="media-icon__label">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
+            Seek backward ${SEEK_TIME} seconds
+          </media-tooltip>
 
-        <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
-            <span class="media-icon__label">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
-          Seek forward ${SEEK_TIME} seconds
-        </media-tooltip>
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <span class="media-icon__container">
+              ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}
+              <span class="media-icon__label">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
+            Seek forward ${SEEK_TIME} seconds
+          </media-tooltip>
 
-        <media-time-group class="media-time">
-          <media-time type="current" class="media-time__value"></media-time>
-          <media-time-slider class="media-slider">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
-          </media-time-slider>
-          <media-time type="duration" class="media-time__value"></media-time>
-        </media-time-group>
+          <media-time-group class="media-time">
+            <media-time type="current" class="media-time__value"></media-time>
+            <media-time-slider class="media-slider">
+              <media-slider-track class="media-slider__track">
+                <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
+              </media-slider-track>
+              <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
+            </media-time-slider>
+            <media-time type="duration" class="media-time__value"></media-time>
+          </media-time-group>
 
-        <media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
-        <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
-          Toggle playback rate
-        </media-tooltip>
+          <media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+          <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
+            Toggle playback rate
+          </media-tooltip>
 
-        <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
-          ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
-          ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
-          ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
-        </media-mute-button>
+          <media-mute-button commandfor="audio-volume-popover" class="media-button media-button--icon media-button--mute">
+            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
+            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
+            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
+          </media-mute-button>
 
-        <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
-          <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-          </media-volume-slider>
-        </media-popover>
+          <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
+            <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+              <media-slider-track class="media-slider__track">
+                <media-slider-fill class="media-slider__fill"></media-slider-fill>
+              </media-slider-track>
+              <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+            </media-volume-slider>
+          </media-popover>
+        </media-tooltip-group>
       </div>
     </media-container>
   `;
diff --git a/packages/html/src/define/shared.css b/packages/html/src/define/shared.css
new file mode 100644
index 00000000..d67093d5
--- /dev/null
+++ b/packages/html/src/define/shared.css
@@ -0,0 +1,3 @@
+media-tooltip-group {
+  display: contents;
+}
diff --git a/packages/html/src/define/video/minimal-skin.css b/packages/html/src/define/video/minimal-skin.css
index 383ec1eb..1abf9392 100644
--- a/packages/html/src/define/video/minimal-skin.css
+++ b/packages/html/src/define/video/minimal-skin.css
@@ -1 +1,2 @@
 @import "@videojs/skins/minimal/css/video.css";
+@import "../shared.css";
diff --git a/packages/html/src/define/video/minimal-skin.tailwind.ts b/packages/html/src/define/video/minimal-skin.tailwind.ts
index af6b6989..e6c11fc1 100644
--- a/packages/html/src/define/video/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/video/minimal-skin.tailwind.ts
@@ -35,6 +35,7 @@ import '../ui/seek-button';
 import '../ui/time';
 import '../ui/time-slider';
 import '../ui/tooltip';
+import '../ui/tooltip-group';
 import '../ui/volume-slider';
 import { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';
 
@@ -50,111 +51,113 @@ function getTemplateHTML() {
       </media-buffering-indicator>
 
       <media-controls data-controls="" class="${controls}">
-        <span class="${buttonGroup}">
-          <span class="${tooltipState.play.wrapper}">
-            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
-              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-            </media-play-button>
-            <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-              <span class="${tooltipState.play.replay}">Replay</span>
-              <span class="${tooltipState.play.play}">Play</span>
-              <span class="${tooltipState.play.pause}">Pause</span>
+        <media-tooltip-group class="contents">
+          <div class="${buttonGroup}">
+            <span class="${tooltipState.play.wrapper}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
+                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+              </media-play-button>
+              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+                <span class="${tooltipState.play.replay}">Replay</span>
+                <span class="${tooltipState.play.play}">Play</span>
+                <span class="${tooltipState.play.pause}">Pause</span>
+              </media-tooltip>
+            </span>
+
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+              <span class="${iconContainer}">
+                ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
+                <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
+              Seek backward ${SEEK_TIME} seconds
             </media-tooltip>
-          </span>
 
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-            <span class="${iconContainer}">
-              ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
-              <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
-            Seek backward ${SEEK_TIME} seconds
-          </media-tooltip>
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+              <span class="${iconContainer}">
+                ${renderIcon('seek', { class: icon })}
+                <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
+              Seek forward ${SEEK_TIME} seconds
+            </media-tooltip>
+          </div>
 
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-            <span class="${iconContainer}">
-              ${renderIcon('seek', { class: icon })}
-              <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
-            Seek forward ${SEEK_TIME} seconds
-          </media-tooltip>
-        </span>
+          <div class="${time.controls}">
+            <media-time-group class="${time.group}">
+              <media-time type="current" class="${time.current}"></media-time>
+              <media-time-separator class="${time.separator}"></media-time-separator>
+              <media-time type="duration" class="${time.duration}"></media-time>
+            </media-time-group>
 
-        <span class="${time.controls}">
-          <media-time-group class="${time.group}">
-            <media-time type="current" class="${time.current}"></media-time>
-            <media-time-separator class="${time.separator}"></media-time-separator>
-            <media-time type="duration" class="${time.duration}"></media-time>
-          </media-time-group>
-
-          <media-time-slider class="${slider.root}">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-              <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
-          </media-time-slider>
-        </span>
-
-        <span class="${buttonGroup}">
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}">
-          </media-playback-rate-button>
-          <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
-            Toggle playback rate
-          </media-tooltip>
-
-          <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
-            ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
-            ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
-            ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
-          </media-mute-button>
-
-          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.volume)}">
-            <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
+            <media-time-slider class="${slider.root}">
               <media-slider-track class="${slider.track}">
                 <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
               </media-slider-track>
-              <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
+              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
+            </media-time-slider>
+          </div>
 
-          <span class="${tooltipState.captions.wrapper}">
-            <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
-              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
-              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
-            </media-captions-button>
-            <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
-              <span class="${tooltipState.captions.enable}">Enable captions</span>
-              <span class="${tooltipState.captions.disable}">Disable captions</span>
+          <div class="${buttonGroup}">
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}">
+            </media-playback-rate-button>
+            <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
+              Toggle playback rate
             </media-tooltip>
-          </span>
 
-          <span class="${tooltipState.pip.wrapper}">
-            <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}">
-              ${renderIcon('pip', { class: icon })}
-            </media-pip-button>
-            <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
-              <span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
-              <span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
-            </media-tooltip>
-          </span>
+            <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
+              ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
+              ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
+              ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
+            </media-mute-button>
 
-          <span class="${tooltipState.fullscreen.wrapper}">
-            <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
-              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
-              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
-            </media-fullscreen-button>
-            <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
-              <span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
-              <span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
-            </media-tooltip>
-          </span>
-        </span>
+            <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.volume)}">
+              <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="${slider.track}">
+                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+
+            <span class="${tooltipState.captions.wrapper}">
+              <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
+                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
+                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
+              </media-captions-button>
+              <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
+                <span class="${tooltipState.captions.enable}">Enable captions</span>
+                <span class="${tooltipState.captions.disable}">Disable captions</span>
+              </media-tooltip>
+            </span>
+
+            <span class="${tooltipState.pip.wrapper}">
+              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}">
+                ${renderIcon('pip', { class: icon })}
+              </media-pip-button>
+              <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
+                <span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
+                <span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
+              </media-tooltip>
+            </span>
+
+            <span class="${tooltipState.fullscreen.wrapper}">
+              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
+                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
+                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
+              </media-fullscreen-button>
+              <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
+                <span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
+                <span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
+              </media-tooltip>
+            </span>
+          </div>
+        </media-tooltip-group>
       </media-controls>
 
       <div class="${overlay}"></div>
diff --git a/packages/html/src/define/video/minimal-skin.ts b/packages/html/src/define/video/minimal-skin.ts
index 17b1c4f5..724cb4ce 100644
--- a/packages/html/src/define/video/minimal-skin.ts
+++ b/packages/html/src/define/video/minimal-skin.ts
@@ -17,6 +17,7 @@ import '../ui/seek-button';
 import '../ui/time';
 import '../ui/time-slider';
 import '../ui/tooltip';
+import '../ui/tooltip-group';
 import '../ui/volume-slider';
 
 const SEEK_TIME = 10;
@@ -31,101 +32,103 @@ function getTemplateHTML() {
       </media-buffering-indicator>
 
       <media-controls class="media-controls">
-        <span class="media-button-group">
-          <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
-            ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
-            ${renderIcon('play', { class: 'media-icon media-icon--play' })}
-            ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
-          </media-play-button>
-          <media-tooltip id="play-tooltip" side="top" class="media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
-            <span class="media-tooltip-label media-tooltip-label--play">Play</span>
-            <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
-          </media-tooltip>
+        <media-tooltip-group>
+          <div class="media-button-group">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
+              ${renderIcon('play', { class: 'media-icon media-icon--play' })}
+              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="media-tooltip">
+              <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
+              <span class="media-tooltip-label media-tooltip-label--play">Play</span>
+              <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
+            </media-tooltip>
 
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-            <span class="media-icon__container">
-              ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}
-              <span class="media-icon__label">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
-            Seek backward ${SEEK_TIME} seconds
-          </media-tooltip>
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+              <span class="media-icon__container">
+                ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}
+                <span class="media-icon__label">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
+              Seek backward ${SEEK_TIME} seconds
+            </media-tooltip>
 
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-            <span class="media-icon__container">
-              ${renderIcon('seek', { class: 'media-icon' })}
-              <span class="media-icon__label">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
-            Seek forward ${SEEK_TIME} seconds
-          </media-tooltip>
-        </span>
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+              <span class="media-icon__container">
+                ${renderIcon('seek', { class: 'media-icon' })}
+                <span class="media-icon__label">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
+              Seek forward ${SEEK_TIME} seconds
+            </media-tooltip>
+          </div>
 
-        <span class="media-time-controls">
-          <media-time-group class="media-time">
-            <media-time type="current" class="media-time__value media-time__value--current"></media-time>
-            <media-time-separator class="media-time__separator"></media-time-separator>
-            <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
-          </media-time-group>
+          <div class="media-time-controls">
+            <media-time-group class="media-time">
+              <media-time type="current" class="media-time__value media-time__value--current"></media-time>
+              <media-time-separator class="media-time__separator"></media-time-separator>
+              <media-time type="duration" class="media-time__value media-time__value--duration"></media-time>
+            </media-time-group>
 
-          <media-time-slider class="media-slider">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
-          </media-time-slider>
-        </span>
-
-        <span class="media-button-group">
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
-          <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
-            Toggle playback rate
-          </media-tooltip>
-
-          <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
-            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
-            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
-            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
-          </media-mute-button>
-
-          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popover media-popover--volume">
-            <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+            <media-time-slider class="media-slider">
               <media-slider-track class="media-slider__track">
                 <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
               </media-slider-track>
-              <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
+              <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
+            </media-time-slider>
+          </div>
 
-          <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
-            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
-            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
-          </media-captions-button>
-          <media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
-            Toggle captions
-          </media-tooltip>
+          <div class="media-button-group">
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+            <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
+              Toggle playback rate
+            </media-tooltip>
 
-          <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
-            ${renderIcon('pip', { class: 'media-icon' })}
-          </media-pip-button>
-          <media-tooltip id="pip-tooltip" side="top" class="media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
-            <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
-          </media-tooltip>
+            <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
+              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
+              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
+              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
+            </media-mute-button>
 
-          <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
-            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
-            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
-          </media-fullscreen-button>
-          <media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
-            <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
-          </media-tooltip>
-        </span>
+            <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popover media-popover--volume">
+              <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="media-slider__track">
+                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+
+            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
+              ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
+              ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
+            </media-captions-button>
+            <media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
+              Toggle captions
+            </media-tooltip>
+
+            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
+              ${renderIcon('pip', { class: 'media-icon' })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="media-tooltip">
+              <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
+              <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
+            </media-tooltip>
+
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
+              ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
+              ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip">
+              <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
+              <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
+            </media-tooltip>
+          </div>
+        </media-tooltip-group>
       </media-controls>
 
       <div class="media-overlay"></div>
diff --git a/packages/html/src/define/video/skin.css b/packages/html/src/define/video/skin.css
index 14b25f0f..383d5bcd 100644
--- a/packages/html/src/define/video/skin.css
+++ b/packages/html/src/define/video/skin.css
@@ -1 +1,2 @@
 @import "@videojs/skins/default/css/video.css";
+@import "../shared.css";
diff --git a/packages/html/src/define/video/skin.tailwind.ts b/packages/html/src/define/video/skin.tailwind.ts
index 81b81dd7..b7c4c67b 100644
--- a/packages/html/src/define/video/skin.tailwind.ts
+++ b/packages/html/src/define/video/skin.tailwind.ts
@@ -35,6 +35,7 @@ import '../ui/seek-button';
 import '../ui/time';
 import '../ui/time-slider';
 import '../ui/tooltip';
+import '../ui/tooltip-group';
 import '../ui/volume-slider';
 
 const SEEK_TIME = 10;
@@ -51,102 +52,104 @@ function getTemplateHTML() {
       </media-buffering-indicator>
 
       <media-controls data-controls="" class="${controls}">
-        <span class="${tooltipState.play.wrapper}">
-          <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
-            ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-            ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-            ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-          </media-play-button>
-          <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.play.replay}">Replay</span>
-            <span class="${tooltipState.play.play}">Play</span>
-            <span class="${tooltipState.play.pause}">Pause</span>
-          </media-tooltip>
-        </span>
-
-        <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-          <span class="${iconContainer}">
-            ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
-            <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
+        <media-tooltip-group class="contents">
+          <span class="${tooltipState.play.wrapper}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <span class="${tooltipState.play.replay}">Replay</span>
+              <span class="${tooltipState.play.play}">Play</span>
+              <span class="${tooltipState.play.pause}">Pause</span>
+            </media-tooltip>
           </span>
-        </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Seek backward ${SEEK_TIME} seconds
-        </media-tooltip>
 
-        <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
-          <span class="${iconContainer}">
-            ${renderIcon('seek', { class: icon })}
-            <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+            <span class="${iconContainer}">
+              ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
+              <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
+            Seek backward ${SEEK_TIME} seconds
+          </media-tooltip>
+
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}">
+            <span class="${iconContainer}">
+              ${renderIcon('seek', { class: icon })}
+              <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
+            Seek forward ${SEEK_TIME} seconds
+          </media-tooltip>
+
+          <media-time-group class="${time.group}">
+            <media-time type="current" class="${time.current}"></media-time>
+            <media-time-slider class="${slider.root}">
+              <media-slider-track class="${slider.track}">
+                <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
+              </media-slider-track>
+              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
+            </media-time-slider>
+            <media-time type="duration" class="${time.duration}"></media-time>
+          </media-time-group>
+
+          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
+          <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
+            Toggle playback rate
+          </media-tooltip>
+
+          <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
+            ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
+            ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
+            ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
+          </media-mute-button>
+
+          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
+            <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
+              <media-slider-track class="${slider.track}">
+                <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+              </media-slider-track>
+              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
+            </media-volume-slider>
+          </media-popover>
+
+          <span class="${tooltipState.captions.wrapper}">
+            <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
+              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
+              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
+            </media-captions-button>
+            <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <span class="${tooltipState.captions.enable}">Enable captions</span>
+              <span class="${tooltipState.captions.disable}">Disable captions</span>
+            </media-tooltip>
           </span>
-        </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Seek forward ${SEEK_TIME} seconds
-        </media-tooltip>
 
-        <media-time-group class="${time.group}">
-          <media-time type="current" class="${time.current}"></media-time>
-          <media-time-slider class="${slider.root}">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-              <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
-          </media-time-slider>
-          <media-time type="duration" class="${time.duration}"></media-time>
-        </media-time-group>
+          <span class="${tooltipState.pip.wrapper}">
+            <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}">
+              ${renderIcon('pip', { class: icon })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
+              <span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
+            </media-tooltip>
+          </span>
 
-        <media-playback-rate-button commandfor="playback-rate-tooltip"  class="${cn(button.base, button.icon, playbackRate.button)}"></media-playback-rate-button>
-        <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
-          Toggle playback rate
-        </media-tooltip>
-
-        <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.icon, iconState.mute.button)}">
-          ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
-          ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
-          ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
-        </media-mute-button>
-
-        <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
-          <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
-            <media-slider-track class="${slider.track}">
-              <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-            </media-slider-track>
-            <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
-          </media-volume-slider>
-        </media-popover>
-
-        <span class="${tooltipState.captions.wrapper}">
-          <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.icon, iconState.captions.button)}">
-            ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
-            ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
-          </media-captions-button>
-          <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.captions.enable}">Enable captions</span>
-            <span class="${tooltipState.captions.disable}">Disable captions</span>
-          </media-tooltip>
-        </span>
-
-        <span class="${tooltipState.pip.wrapper}">
-          <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.icon)}">
-            ${renderIcon('pip', { class: icon })}
-          </media-pip-button>
-          <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.pip.enter}">Enter picture-in-picture</span>
-            <span class="${tooltipState.pip.exit}">Exit picture-in-picture</span>
-          </media-tooltip>
-        </span>
-
-        <span class="${tooltipState.fullscreen.wrapper}">
-          <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
-            ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
-            ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
-          </media-fullscreen-button>
-          <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
-            <span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
-            <span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
-          </media-tooltip>
-        </span>
+          <span class="${tooltipState.fullscreen.wrapper}">
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.icon, iconState.fullscreen.button)}">
+              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
+              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <span class="${tooltipState.fullscreen.enter}">Enter fullscreen</span>
+              <span class="${tooltipState.fullscreen.exit}">Exit fullscreen</span>
+            </media-tooltip>
+          </span>
+        </media-tooltip-group>
       </media-controls>
 
       <div class="${overlay}"></div>
diff --git a/packages/html/src/define/video/skin.ts b/packages/html/src/define/video/skin.ts
index 7088c345..2eb78e30 100644
--- a/packages/html/src/define/video/skin.ts
+++ b/packages/html/src/define/video/skin.ts
@@ -18,6 +18,7 @@ import '../ui/seek-button';
 import '../ui/time';
 import '../ui/time-slider';
 import '../ui/tooltip';
+import '../ui/tooltip-group';
 import '../ui/volume-slider';
 
 const SEEK_TIME = 10;
@@ -34,94 +35,96 @@ function getTemplateHTML() {
       </media-buffering-indicator>
 
       <media-controls class="media-surface media-controls">
-        <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
-          ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
-          ${renderIcon('play', { class: 'media-icon media-icon--play' })}
-          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
-        </media-play-button>
-        <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
-          <span class="media-tooltip-label media-tooltip-label--play">Play</span>
-          <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
-        </media-tooltip>
+        <media-tooltip-group>
+          <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+            ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
+            ${renderIcon('play', { class: 'media-icon media-icon--play' })}
+            ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
+          </media-play-button>
+          <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
+            <span class="media-tooltip-label media-tooltip-label--play">Play</span>
+            <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
+          </media-tooltip>
 
-        <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}
-            <span class="media-icon__label">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
-          Seek backward ${SEEK_TIME} seconds
-        </media-tooltip>
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <span class="media-icon__container">
+              ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}
+              <span class="media-icon__label">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
+            Seek backward ${SEEK_TIME} seconds
+          </media-tooltip>
 
-        <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon('seek', { class: 'media-icon' })}
-            <span class="media-icon__label">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
-          Seek forward ${SEEK_TIME} seconds
-        </media-tooltip>
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <span class="media-icon__container">
+              ${renderIcon('seek', { class: 'media-icon' })}
+              <span class="media-icon__label">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
+            Seek forward ${SEEK_TIME} seconds
+          </media-tooltip>
 
-        <media-time-group class="media-time">
-          <media-time type="current" class="media-time__value"></media-time>
-          <media-time-slider class="media-slider">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
-          </media-time-slider>
-          <media-time type="duration" class="media-time__value"></media-time>
-        </media-time-group>
+          <media-time-group class="media-time">
+            <media-time type="current" class="media-time__value"></media-time>
+            <media-time-slider class="media-slider">
+              <media-slider-track class="media-slider__track">
+                <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
+              </media-slider-track>
+              <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
+            </media-time-slider>
+            <media-time type="duration" class="media-time__value"></media-time>
+          </media-time-group>
 
-        <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
-        <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
-          Toggle playback rate
-        </media-tooltip>
+          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+          <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
+            Toggle playback rate
+          </media-tooltip>
 
-        <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
-          ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
-          ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
-          ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
-        </media-mute-button>
+          <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
+            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
+            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
+            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
+          </media-mute-button>
 
-        <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
-          <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-          </media-volume-slider>
-        </media-popover>
+          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
+            <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+              <media-slider-track class="media-slider__track">
+                <media-slider-fill class="media-slider__fill"></media-slider-fill>
+              </media-slider-track>
+              <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+            </media-volume-slider>
+          </media-popover>
 
-        <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
-          ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
-          ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
-        </media-captions-button>
-        <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
-          <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
-        </media-tooltip>
+          <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
+            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
+            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
+          </media-captions-button>
+          <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
+            <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
+          </media-tooltip>
 
-        <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
-          ${renderIcon('pip', { class: 'media-icon' })}
-        </media-pip-button>
-        <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
-          <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
-        </media-tooltip>
+          <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
+            ${renderIcon('pip', { class: 'media-icon' })}
+          </media-pip-button>
+          <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
+            <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
+          </media-tooltip>
 
-        <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
-          ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
-          ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
-        </media-fullscreen-button>
-        <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
-          <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
-        </media-tooltip>
+          <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
+            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
+            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
+          </media-fullscreen-button>
+          <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
+            <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
+          </media-tooltip>
+        </media-tooltip-group>
       </media-controls>
 
       <div class="media-overlay"></div>
diff --git a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
index 20547621..e88f4fae 100644
--- a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
@@ -108,121 +108,123 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
       {children}
 
       <div className={controls}>
-        <span className={buttonGroup}>
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PlayButton
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={iconState.play.button}>
-                      <RestartIcon className={cn(icon, iconState.play.restart)} />
-                      <PlayIcon className={cn(icon, iconState.play.play)} />
-                      <PauseIcon className={cn(icon, iconState.play.pause)} />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>
-              <PlayLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
+        <Tooltip.Provider>
+          <div className={buttonGroup}>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={iconState.play.button}>
+                        <RestartIcon className={cn(icon, iconState.play.restart)} />
+                        <PlayIcon className={cn(icon, iconState.play.play)} />
+                        <PauseIcon className={cn(icon, iconState.play.pause)} />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>
+                <PlayLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <SeekButton
-                  seconds={-SEEK_TIME}
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={seek.button}>
-                      <span className={iconContainer}>
-                        <SeekIcon className={cn(icon, iconFlipped)} />
-                        <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
-                      </span>
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
-          </Tooltip.Root>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton
+                    seconds={-SEEK_TIME}
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={seek.button}>
+                        <span className={iconContainer}>
+                          <SeekIcon className={cn(icon, iconFlipped)} />
+                          <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
+                        </span>
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <SeekButton
-                  seconds={SEEK_TIME}
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={seek.button}>
-                      <span className={iconContainer}>
-                        <SeekIcon className={icon} />
-                        <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
-                      </span>
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
-          </Tooltip.Root>
-        </span>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton
+                    seconds={SEEK_TIME}
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={seek.button}>
+                        <span className={iconContainer}>
+                          <SeekIcon className={icon} />
+                          <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
+                        </span>
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
 
-        <span className={time.controls}>
-          <Time.Group className={time.group}>
-            <Time.Value type="current" className={time.current} />
-            <Time.Separator className={time.separator} />
-            <Time.Value type="duration" className={time.duration} />
-          </Time.Group>
+          <div className={time.controls}>
+            <Time.Group className={time.group}>
+              <Time.Value type="current" className={time.current} />
+              <Time.Separator className={time.separator} />
+              <Time.Value type="duration" className={time.duration} />
+            </Time.Group>
 
-          <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>
-            <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>
-              <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />
-              <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
-            </TimeSlider.Track>
-            <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
-          </TimeSlider.Root>
-        </span>
+            <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>
+              <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>
+                <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />
+                <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
+              </TimeSlider.Track>
+              <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
+            </TimeSlider.Root>
+          </div>
 
-        <span className={buttonGroup}>
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PlaybackRateButton
-                  render={(props) => <Button variant="icon" {...props} className={playbackRate.button} />}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
-          </Tooltip.Root>
+          <div className={buttonGroup}>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlaybackRateButton
+                    render={(props) => <Button variant="icon" {...props} className={playbackRate.button} />}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Popover.Root openOnHover delay={200} closeDelay={100} side="left">
-            <Popover.Trigger
-              render={
-                <MuteButton
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={iconState.mute.button}>
-                      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
-                      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
-                      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Popover.Popup className={cn(popup.volume)}>
-              <VolumeSlider.Root
-                orientation="horizontal"
-                thumbAlignment="edge"
-                render={(props) => <SliderRoot {...props} />}
-              >
-                <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>
-                  <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />
-                </VolumeSlider.Track>
-                <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
-              </VolumeSlider.Root>
-            </Popover.Popup>
-          </Popover.Root>
-        </span>
+            <Popover.Root openOnHover delay={200} closeDelay={100} side="left">
+              <Popover.Trigger
+                render={
+                  <MuteButton
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={iconState.mute.button}>
+                        <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
+                        <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
+                        <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Popover.Popup className={cn(popup.volume)}>
+                <VolumeSlider.Root
+                  orientation="horizontal"
+                  thumbAlignment="edge"
+                  render={(props) => <SliderRoot {...props} />}
+                >
+                  <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>
+                    <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />
+                  </VolumeSlider.Track>
+                  <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
+                </VolumeSlider.Root>
+              </Popover.Popup>
+            </Popover.Root>
+          </div>
+        </Tooltip.Provider>
       </div>
     </Container>
   );
diff --git a/packages/react/src/presets/audio/minimal-skin.tsx b/packages/react/src/presets/audio/minimal-skin.tsx
index 45499dd8..904a5c7c 100644
--- a/packages/react/src/presets/audio/minimal-skin.tsx
+++ b/packages/react/src/presets/audio/minimal-skin.tsx
@@ -44,117 +44,119 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
       {children}
 
       <div className="media-controls">
-        <span className="media-button-group">
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PlayButton
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--play">
-                      <RestartIcon className="media-icon media-icon--restart" />
-                      <PlayIcon className="media-icon media-icon--play" />
-                      <PauseIcon className="media-icon media-icon--pause" />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">
-              <PlayLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
+        <Tooltip.Provider>
+          <div className="media-button-group">
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--play">
+                        <RestartIcon className="media-icon media-icon--restart" />
+                        <PlayIcon className="media-icon media-icon--play" />
+                        <PauseIcon className="media-icon media-icon--pause" />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <PlayLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <SeekButton
-                  seconds={-SEEK_TIME}
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--seek">
-                      <span className="media-icon__container">
-                        <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
-                        <span className="media-icon__label">{SEEK_TIME}</span>
-                      </span>
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
-          </Tooltip.Root>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton
+                    seconds={-SEEK_TIME}
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--seek">
+                        <span className="media-icon__container">
+                          <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
+                          <span className="media-icon__label">{SEEK_TIME}</span>
+                        </span>
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <SeekButton
-                  seconds={SEEK_TIME}
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--seek">
-                      <span className="media-icon__container">
-                        <SeekIcon className="media-icon media-icon--seek" />
-                        <span className="media-icon__label">{SEEK_TIME}</span>
-                      </span>
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
-          </Tooltip.Root>
-        </span>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton
+                    seconds={SEEK_TIME}
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--seek">
+                        <span className="media-icon__container">
+                          <SeekIcon className="media-icon media-icon--seek" />
+                          <span className="media-icon__label">{SEEK_TIME}</span>
+                        </span>
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
 
-        <span className="media-time-controls">
-          <Time.Group className="media-time">
-            <Time.Value type="current" className="media-time__value media-time__value--current" />
-            <Time.Separator className="media-time__separator" />
-            <Time.Value type="duration" className="media-time__value media-time__value--duration" />
-          </Time.Group>
+          <div className="media-time-controls">
+            <Time.Group className="media-time">
+              <Time.Value type="current" className="media-time__value media-time__value--current" />
+              <Time.Separator className="media-time__separator" />
+              <Time.Value type="duration" className="media-time__value media-time__value--duration" />
+            </Time.Group>
 
-          <TimeSlider.Root className="media-slider">
-            <TimeSlider.Track className="media-slider__track">
-              <TimeSlider.Fill className="media-slider__fill" />
-              <TimeSlider.Buffer className="media-slider__buffer" />
-            </TimeSlider.Track>
-            <TimeSlider.Thumb className="media-slider__thumb" />
-          </TimeSlider.Root>
-        </span>
+            <TimeSlider.Root className="media-slider">
+              <TimeSlider.Track className="media-slider__track">
+                <TimeSlider.Fill className="media-slider__fill" />
+                <TimeSlider.Buffer className="media-slider__buffer" />
+              </TimeSlider.Track>
+              <TimeSlider.Thumb className="media-slider__thumb" />
+            </TimeSlider.Root>
+          </div>
 
-        <span className="media-button-group">
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PlaybackRateButton
-                  render={(props) => <Button {...props} className="media-button--icon media-button--playback-rate" />}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">Toggle playback rate</Tooltip.Popup>
-          </Tooltip.Root>
+          <div className="media-button-group">
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlaybackRateButton
+                    render={(props) => <Button {...props} className="media-button--icon media-button--playback-rate" />}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">Toggle playback rate</Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Popover.Root openOnHover delay={200} closeDelay={100} side="left">
-            <Popover.Trigger
-              render={
-                <MuteButton
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--mute">
-                      <VolumeOffIcon className="media-icon media-icon--volume-off" />
-                      <VolumeLowIcon className="media-icon media-icon--volume-low" />
-                      <VolumeHighIcon className="media-icon media-icon--volume-high" />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Popover.Popup className="media-popover media-popover--volume">
-              <VolumeSlider.Root className="media-slider" orientation="horizontal" thumbAlignment="edge">
-                <VolumeSlider.Track className="media-slider__track">
-                  <VolumeSlider.Fill className="media-slider__fill" />
-                </VolumeSlider.Track>
-                <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
-              </VolumeSlider.Root>
-            </Popover.Popup>
-          </Popover.Root>
-        </span>
+            <Popover.Root openOnHover delay={200} closeDelay={100} side="left">
+              <Popover.Trigger
+                render={
+                  <MuteButton
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--mute">
+                        <VolumeOffIcon className="media-icon media-icon--volume-off" />
+                        <VolumeLowIcon className="media-icon media-icon--volume-low" />
+                        <VolumeHighIcon className="media-icon media-icon--volume-high" />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Popover.Popup className="media-popover media-popover--volume">
+                <VolumeSlider.Root className="media-slider" orientation="horizontal" thumbAlignment="edge">
+                  <VolumeSlider.Track className="media-slider__track">
+                    <VolumeSlider.Fill className="media-slider__fill" />
+                  </VolumeSlider.Track>
+                  <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
+                </VolumeSlider.Root>
+              </Popover.Popup>
+            </Popover.Root>
+          </div>
+        </Tooltip.Provider>
       </div>
     </Container>
   );
diff --git a/packages/react/src/presets/audio/skin.tailwind.tsx b/packages/react/src/presets/audio/skin.tailwind.tsx
index e4f3a3d6..e475f61d 100644
--- a/packages/react/src/presets/audio/skin.tailwind.tsx
+++ b/packages/react/src/presets/audio/skin.tailwind.tsx
@@ -107,113 +107,115 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
       {children}
 
       <div className={controls}>
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PlayButton
-                render={(props) => (
-                  <Button variant="icon" {...props} className={iconState.play.button}>
-                    <RestartIcon className={cn(icon, iconState.play.restart)} />
-                    <PlayIcon className={cn(icon, iconState.play.play)} />
-                    <PauseIcon className={cn(icon, iconState.play.pause)} />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>
-            <PlayLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+        <Tooltip.Provider>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PlayButton
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={iconState.play.button}>
+                      <RestartIcon className={cn(icon, iconState.play.restart)} />
+                      <PlayIcon className={cn(icon, iconState.play.play)} />
+                      <PauseIcon className={cn(icon, iconState.play.pause)} />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>
+              <PlayLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <SeekButton
-                seconds={-SEEK_TIME}
-                render={(props) => (
-                  <Button variant="icon" {...props} className={seek.button}>
-                    <span className={iconContainer}>
-                      <SeekIcon className={cn(icon, iconFlipped)} />
-                      <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
-                    </span>
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <SeekButton
+                  seconds={-SEEK_TIME}
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={seek.button}>
+                      <span className={iconContainer}>
+                        <SeekIcon className={cn(icon, iconFlipped)} />
+                        <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
+                      </span>
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <SeekButton
-                seconds={SEEK_TIME}
-                render={(props) => (
-                  <Button variant="icon" {...props} className={seek.button}>
-                    <span className={iconContainer}>
-                      <SeekIcon className={icon} />
-                      <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
-                    </span>
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <SeekButton
+                  seconds={SEEK_TIME}
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={seek.button}>
+                      <span className={iconContainer}>
+                        <SeekIcon className={icon} />
+                        <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
+                      </span>
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Time.Group className={time.group}>
-          <Time.Value type="current" className={time.current} />
-          <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>
-            <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>
-              <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />
-              <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
-            </TimeSlider.Track>
-            <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
-          </TimeSlider.Root>
-          <Time.Value type="duration" className={time.duration} />
-        </Time.Group>
+          <Time.Group className={time.group}>
+            <Time.Value type="current" className={time.current} />
+            <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>
+              <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>
+                <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />
+                <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
+              </TimeSlider.Track>
+              <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
+            </TimeSlider.Root>
+            <Time.Value type="duration" className={time.duration} />
+          </Time.Group>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PlaybackRateButton
-                render={(props) => <Button variant="icon" {...props} className={playbackRate.button} />}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PlaybackRateButton
+                  render={(props) => <Button variant="icon" {...props} className={playbackRate.button} />}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
-          <Popover.Trigger
-            render={
-              <MuteButton
-                render={(props) => (
-                  <Button variant="icon" {...props} className={iconState.mute.button}>
-                    <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
-                    <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
-                    <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Popover.Popup className={cn(popup.popover, popup.volume)}>
-            <VolumeSlider.Root
-              orientation="vertical"
-              thumbAlignment="edge"
-              render={(props) => <SliderRoot {...props} />}
-            >
-              <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>
-                <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />
-              </VolumeSlider.Track>
-              <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
-            </VolumeSlider.Root>
-          </Popover.Popup>
-        </Popover.Root>
+          <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+            <Popover.Trigger
+              render={
+                <MuteButton
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={iconState.mute.button}>
+                      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
+                      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
+                      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Popover.Popup className={cn(popup.popover, popup.volume)}>
+              <VolumeSlider.Root
+                orientation="vertical"
+                thumbAlignment="edge"
+                render={(props) => <SliderRoot {...props} />}
+              >
+                <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>
+                  <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />
+                </VolumeSlider.Track>
+                <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
+              </VolumeSlider.Root>
+            </Popover.Popup>
+          </Popover.Root>
+        </Tooltip.Provider>
       </div>
     </Container>
   );
diff --git a/packages/react/src/presets/audio/skin.tsx b/packages/react/src/presets/audio/skin.tsx
index 045da05c..3ce8cb06 100644
--- a/packages/react/src/presets/audio/skin.tsx
+++ b/packages/react/src/presets/audio/skin.tsx
@@ -44,109 +44,111 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
       {children}
 
       <div className="media-surface media-controls">
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PlayButton
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--play">
-                    <RestartIcon className="media-icon media-icon--restart" />
-                    <PlayIcon className="media-icon media-icon--play" />
-                    <PauseIcon className="media-icon media-icon--pause" />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">
-            <PlayLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+        <Tooltip.Provider>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PlayButton
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--play">
+                      <RestartIcon className="media-icon media-icon--restart" />
+                      <PlayIcon className="media-icon media-icon--play" />
+                      <PauseIcon className="media-icon media-icon--pause" />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">
+              <PlayLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <SeekButton
-                seconds={-SEEK_TIME}
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--seek">
-                    <span className="media-icon__container">
-                      <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
-                      <span className="media-icon__label">{SEEK_TIME}</span>
-                    </span>
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <SeekButton
+                  seconds={-SEEK_TIME}
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--seek">
+                      <span className="media-icon__container">
+                        <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
+                        <span className="media-icon__label">{SEEK_TIME}</span>
+                      </span>
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <SeekButton
-                seconds={SEEK_TIME}
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--seek">
-                    <span className="media-icon__container">
-                      <SeekIcon className="media-icon media-icon--seek" />
-                      <span className="media-icon__label">{SEEK_TIME}</span>
-                    </span>
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <SeekButton
+                  seconds={SEEK_TIME}
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--seek">
+                      <span className="media-icon__container">
+                        <SeekIcon className="media-icon media-icon--seek" />
+                        <span className="media-icon__label">{SEEK_TIME}</span>
+                      </span>
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Time.Group className="media-time">
-          <Time.Value type="current" className="media-time__value" />
-          <TimeSlider.Root className="media-slider">
-            <TimeSlider.Track className="media-slider__track">
-              <TimeSlider.Fill className="media-slider__fill" />
-              <TimeSlider.Buffer className="media-slider__buffer" />
-            </TimeSlider.Track>
-            <TimeSlider.Thumb className="media-slider__thumb" />
-          </TimeSlider.Root>
-          <Time.Value type="duration" className="media-time__value" />
-        </Time.Group>
+          <Time.Group className="media-time">
+            <Time.Value type="current" className="media-time__value" />
+            <TimeSlider.Root className="media-slider">
+              <TimeSlider.Track className="media-slider__track">
+                <TimeSlider.Fill className="media-slider__fill" />
+                <TimeSlider.Buffer className="media-slider__buffer" />
+              </TimeSlider.Track>
+              <TimeSlider.Thumb className="media-slider__thumb" />
+            </TimeSlider.Root>
+            <Time.Value type="duration" className="media-time__value" />
+          </Time.Group>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PlaybackRateButton
-                render={(props) => <Button {...props} className="media-button--icon media-button--playback-rate" />}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">Toggle playback rate</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PlaybackRateButton
+                  render={(props) => <Button {...props} className="media-button--icon media-button--playback-rate" />}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">Toggle playback rate</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
-          <Popover.Trigger
-            render={
-              <MuteButton
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--mute">
-                    <VolumeOffIcon className="media-icon media-icon--volume-off" />
-                    <VolumeLowIcon className="media-icon media-icon--volume-low" />
-                    <VolumeHighIcon className="media-icon media-icon--volume-high" />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Popover.Popup className="media-surface media-popover media-popover--volume">
-            <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
-              <VolumeSlider.Track className="media-slider__track">
-                <VolumeSlider.Fill className="media-slider__fill" />
-              </VolumeSlider.Track>
-              <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
-            </VolumeSlider.Root>
-          </Popover.Popup>
-        </Popover.Root>
+          <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+            <Popover.Trigger
+              render={
+                <MuteButton
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--mute">
+                      <VolumeOffIcon className="media-icon media-icon--volume-off" />
+                      <VolumeLowIcon className="media-icon media-icon--volume-low" />
+                      <VolumeHighIcon className="media-icon media-icon--volume-high" />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Popover.Popup className="media-surface media-popover media-popover--volume">
+              <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
+                <VolumeSlider.Track className="media-slider__track">
+                  <VolumeSlider.Fill className="media-slider__fill" />
+                </VolumeSlider.Track>
+                <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
+              </VolumeSlider.Root>
+            </Popover.Popup>
+          </Popover.Root>
+        </Tooltip.Provider>
       </div>
     </Container>
   );
diff --git a/packages/react/src/presets/video/minimal-skin.tailwind.tsx b/packages/react/src/presets/video/minimal-skin.tailwind.tsx
index 02a156d6..8e4ca266 100644
--- a/packages/react/src/presets/video/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/video/minimal-skin.tailwind.tsx
@@ -160,174 +160,176 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
         data-controls="" // Used as a hook for Tailwind has-[] styles
         className={controls}
       >
-        <span className={buttonGroup}>
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PlayButton
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={iconState.play.button}>
-                      <RestartIcon className={cn(icon, iconState.play.restart)} />
-                      <PlayIcon className={cn(icon, iconState.play.play)} />
-                      <PauseIcon className={cn(icon, iconState.play.pause)} />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>
-              <PlayLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
+        <Tooltip.Provider>
+          <div className={buttonGroup}>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={iconState.play.button}>
+                        <RestartIcon className={cn(icon, iconState.play.restart)} />
+                        <PlayIcon className={cn(icon, iconState.play.play)} />
+                        <PauseIcon className={cn(icon, iconState.play.pause)} />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>
+                <PlayLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <SeekButton
-                  seconds={-SEEK_TIME}
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={seek.button}>
-                      <span className={iconContainer}>
-                        <SeekIcon className={cn(icon, iconFlipped)} />
-                        <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
-                      </span>
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
-          </Tooltip.Root>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton
+                    seconds={-SEEK_TIME}
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={seek.button}>
+                        <span className={iconContainer}>
+                          <SeekIcon className={cn(icon, iconFlipped)} />
+                          <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
+                        </span>
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <SeekButton
-                  seconds={SEEK_TIME}
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={seek.button}>
-                      <span className={iconContainer}>
-                        <SeekIcon className={icon} />
-                        <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
-                      </span>
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
-          </Tooltip.Root>
-        </span>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton
+                    seconds={SEEK_TIME}
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={seek.button}>
+                        <span className={iconContainer}>
+                          <SeekIcon className={icon} />
+                          <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
+                        </span>
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
 
-        <span className={time.controls}>
-          <Time.Group className={time.group}>
-            <Time.Value type="current" className={time.current} />
-            <Time.Separator className={time.separator} />
-            <Time.Value type="duration" className={time.duration} />
-          </Time.Group>
+          <div className={time.controls}>
+            <Time.Group className={time.group}>
+              <Time.Value type="current" className={time.current} />
+              <Time.Separator className={time.separator} />
+              <Time.Value type="duration" className={time.duration} />
+            </Time.Group>
 
-          <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>
-            <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>
-              <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />
-              <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
-            </TimeSlider.Track>
-            <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
-          </TimeSlider.Root>
-        </span>
+            <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>
+              <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>
+                <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />
+                <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
+              </TimeSlider.Track>
+              <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
+            </TimeSlider.Root>
+          </div>
 
-        <span className={buttonGroup}>
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PlaybackRateButton
-                  render={(props) => <Button variant="icon" {...props} className={playbackRate.button} />}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
-          </Tooltip.Root>
+          <div className={buttonGroup}>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlaybackRateButton
+                    render={(props) => <Button variant="icon" {...props} className={playbackRate.button} />}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
-            <Popover.Trigger
-              render={
-                <MuteButton
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={iconState.mute.button}>
-                      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
-                      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
-                      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Popover.Popup className={cn(popup.volume)}>
-              <VolumeSlider.Root
-                orientation="vertical"
-                thumbAlignment="edge"
-                render={(props) => <SliderRoot {...props} />}
-              >
-                <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>
-                  <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />
-                </VolumeSlider.Track>
-                <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
-              </VolumeSlider.Root>
-            </Popover.Popup>
-          </Popover.Root>
+            <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+              <Popover.Trigger
+                render={
+                  <MuteButton
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={iconState.mute.button}>
+                        <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
+                        <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
+                        <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Popover.Popup className={cn(popup.volume)}>
+                <VolumeSlider.Root
+                  orientation="vertical"
+                  thumbAlignment="edge"
+                  render={(props) => <SliderRoot {...props} />}
+                >
+                  <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>
+                    <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />
+                  </VolumeSlider.Track>
+                  <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
+                </VolumeSlider.Root>
+              </Popover.Popup>
+            </Popover.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <CaptionsButton
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={iconState.captions.button}>
-                      <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
-                      <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>
-              <CaptionsLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CaptionsButton
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={iconState.captions.button}>
+                        <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
+                        <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>
+                <CaptionsLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PiPButton
-                  render={(props) => (
-                    <Button variant="icon" {...props}>
-                      <PipIcon className={icon} />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>
-              <PiPLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PiPButton
+                    render={(props) => (
+                      <Button variant="icon" {...props}>
+                        <PipIcon className={icon} />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>
+                <PiPLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <FullscreenButton
-                  render={(props) => (
-                    <Button variant="icon" {...props} className={iconState.fullscreen.button}>
-                      <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
-                      <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className={cn(popup.tooltip)}>
-              <FullscreenLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
-        </span>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <FullscreenButton
+                    render={(props) => (
+                      <Button variant="icon" {...props} className={iconState.fullscreen.button}>
+                        <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
+                        <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}>
+                <FullscreenLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
+        </Tooltip.Provider>
       </Controls.Root>
 
       <div className={overlay} />
diff --git a/packages/react/src/presets/video/minimal-skin.tsx b/packages/react/src/presets/video/minimal-skin.tsx
index a8164899..a1225614 100644
--- a/packages/react/src/presets/video/minimal-skin.tsx
+++ b/packages/react/src/presets/video/minimal-skin.tsx
@@ -91,170 +91,172 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
       <ErrorDialog classes={errorClasses} />
 
       <Controls.Root className="media-controls">
-        <span className="media-button-group">
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PlayButton
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--play">
-                      <RestartIcon className="media-icon media-icon--restart" />
-                      <PlayIcon className="media-icon media-icon--play" />
-                      <PauseIcon className="media-icon media-icon--pause" />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">
-              <PlayLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
+        <Tooltip.Provider>
+          <div className="media-button-group">
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--play">
+                        <RestartIcon className="media-icon media-icon--restart" />
+                        <PlayIcon className="media-icon media-icon--play" />
+                        <PauseIcon className="media-icon media-icon--pause" />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <PlayLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <SeekButton
-                  seconds={-SEEK_TIME}
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--seek">
-                      <span className="media-icon__container">
-                        <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
-                        <span className="media-icon__label">{SEEK_TIME}</span>
-                      </span>
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
-          </Tooltip.Root>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton
+                    seconds={-SEEK_TIME}
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--seek">
+                        <span className="media-icon__container">
+                          <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
+                          <span className="media-icon__label">{SEEK_TIME}</span>
+                        </span>
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <SeekButton
-                  seconds={SEEK_TIME}
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--seek">
-                      <span className="media-icon__container">
-                        <SeekIcon className="media-icon media-icon--seek" />
-                        <span className="media-icon__label">{SEEK_TIME}</span>
-                      </span>
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
-          </Tooltip.Root>
-        </span>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton
+                    seconds={SEEK_TIME}
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--seek">
+                        <span className="media-icon__container">
+                          <SeekIcon className="media-icon media-icon--seek" />
+                          <span className="media-icon__label">{SEEK_TIME}</span>
+                        </span>
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
 
-        <span className="media-time-controls">
-          <Time.Group className="media-time">
-            <Time.Value type="current" className="media-time__value media-time__value--current" />
-            <Time.Separator className="media-time__separator" />
-            <Time.Value type="duration" className="media-time__value media-time__value--duration" />
-          </Time.Group>
+          <div className="media-time-controls">
+            <Time.Group className="media-time">
+              <Time.Value type="current" className="media-time__value media-time__value--current" />
+              <Time.Separator className="media-time__separator" />
+              <Time.Value type="duration" className="media-time__value media-time__value--duration" />
+            </Time.Group>
 
-          <TimeSlider.Root className="media-slider">
-            <TimeSlider.Track className="media-slider__track">
-              <TimeSlider.Fill className="media-slider__fill" />
-              <TimeSlider.Buffer className="media-slider__buffer" />
-            </TimeSlider.Track>
-            <TimeSlider.Thumb className="media-slider__thumb" />
-          </TimeSlider.Root>
-        </span>
+            <TimeSlider.Root className="media-slider">
+              <TimeSlider.Track className="media-slider__track">
+                <TimeSlider.Fill className="media-slider__fill" />
+                <TimeSlider.Buffer className="media-slider__buffer" />
+              </TimeSlider.Track>
+              <TimeSlider.Thumb className="media-slider__thumb" />
+            </TimeSlider.Root>
+          </div>
 
-        <span className="media-button-group">
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PlaybackRateButton
-                  render={(props) => <Button {...props} className="media-button--icon media-button--playback-rate" />}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">Toggle playback rate</Tooltip.Popup>
-          </Tooltip.Root>
+          <div className="media-button-group">
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlaybackRateButton
+                    render={(props) => <Button {...props} className="media-button--icon media-button--playback-rate" />}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">Toggle playback rate</Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
-            <Popover.Trigger
-              render={
-                <MuteButton
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--mute">
-                      <VolumeOffIcon className="media-icon media-icon--volume-off" />
-                      <VolumeLowIcon className="media-icon media-icon--volume-low" />
-                      <VolumeHighIcon className="media-icon media-icon--volume-high" />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Popover.Popup className="media-popover media-popover--volume">
-              <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
-                <VolumeSlider.Track className="media-slider__track">
-                  <VolumeSlider.Fill className="media-slider__fill" />
-                </VolumeSlider.Track>
-                <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
-              </VolumeSlider.Root>
-            </Popover.Popup>
-          </Popover.Root>
+            <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+              <Popover.Trigger
+                render={
+                  <MuteButton
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--mute">
+                        <VolumeOffIcon className="media-icon media-icon--volume-off" />
+                        <VolumeLowIcon className="media-icon media-icon--volume-low" />
+                        <VolumeHighIcon className="media-icon media-icon--volume-high" />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Popover.Popup className="media-popover media-popover--volume">
+                <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
+                  <VolumeSlider.Track className="media-slider__track">
+                    <VolumeSlider.Fill className="media-slider__fill" />
+                  </VolumeSlider.Track>
+                  <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
+                </VolumeSlider.Root>
+              </Popover.Popup>
+            </Popover.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <CaptionsButton
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--captions">
-                      <CaptionsOffIcon className="media-icon media-icon--captions-off" />
-                      <CaptionsOnIcon className="media-icon media-icon--captions-on" />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">
-              <CaptionsLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CaptionsButton
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--captions">
+                        <CaptionsOffIcon className="media-icon media-icon--captions-off" />
+                        <CaptionsOnIcon className="media-icon media-icon--captions-on" />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <CaptionsLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <PiPButton
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon">
-                      <PipIcon className="media-icon" />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">
-              <PiPLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PiPButton
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon">
+                        <PipIcon className="media-icon" />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <PiPLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
 
-          <Tooltip.Root side="top">
-            <Tooltip.Trigger
-              render={
-                <FullscreenButton
-                  render={(props) => (
-                    <Button {...props} className="media-button--icon media-button--fullscreen">
-                      <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
-                      <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
-                    </Button>
-                  )}
-                />
-              }
-            />
-            <Tooltip.Popup className="media-tooltip">
-              <FullscreenLabel />
-            </Tooltip.Popup>
-          </Tooltip.Root>
-        </span>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <FullscreenButton
+                    render={(props) => (
+                      <Button {...props} className="media-button--icon media-button--fullscreen">
+                        <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
+                        <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
+                      </Button>
+                    )}
+                  />
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <FullscreenLabel />
+              </Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
+        </Tooltip.Provider>
       </Controls.Root>
 
       <div className="media-overlay" />
diff --git a/packages/react/src/presets/video/skin.tailwind.tsx b/packages/react/src/presets/video/skin.tailwind.tsx
index 98c067b3..822fb885 100644
--- a/packages/react/src/presets/video/skin.tailwind.tsx
+++ b/packages/react/src/presets/video/skin.tailwind.tsx
@@ -162,166 +162,168 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
         data-controls="" // Used as a hook for Tailwind has-[] styles
         className={controls}
       >
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PlayButton
-                render={(props) => (
-                  <Button variant="icon" {...props} className={iconState.play.button}>
-                    <RestartIcon className={cn(icon, iconState.play.restart)} />
-                    <PlayIcon className={cn(icon, iconState.play.play)} />
-                    <PauseIcon className={cn(icon, iconState.play.pause)} />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>
-            <PlayLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+        <Tooltip.Provider>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PlayButton
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={iconState.play.button}>
+                      <RestartIcon className={cn(icon, iconState.play.restart)} />
+                      <PlayIcon className={cn(icon, iconState.play.play)} />
+                      <PauseIcon className={cn(icon, iconState.play.pause)} />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>
+              <PlayLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <SeekButton
-                seconds={-SEEK_TIME}
-                render={(props) => (
-                  <Button variant="icon" {...props} className={seek.button}>
-                    <span className={iconContainer}>
-                      <SeekIcon className={cn(icon, iconFlipped)} />
-                      <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
-                    </span>
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <SeekButton
+                  seconds={-SEEK_TIME}
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={seek.button}>
+                      <span className={iconContainer}>
+                        <SeekIcon className={cn(icon, iconFlipped)} />
+                        <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
+                      </span>
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <SeekButton
-                seconds={SEEK_TIME}
-                render={(props) => (
-                  <Button variant="icon" {...props} className={seek.button}>
-                    <span className={iconContainer}>
-                      <SeekIcon className={icon} />
-                      <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
-                    </span>
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <SeekButton
+                  seconds={SEEK_TIME}
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={seek.button}>
+                      <span className={iconContainer}>
+                        <SeekIcon className={icon} />
+                        <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
+                      </span>
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Time.Group className={time.group}>
-          <Time.Value type="current" className={time.current} />
-          <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>
-            <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>
-              <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />
-              <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
-            </TimeSlider.Track>
-            <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
-          </TimeSlider.Root>
-          <Time.Value type="duration" className={time.duration} />
-        </Time.Group>
+          <Time.Group className={time.group}>
+            <Time.Value type="current" className={time.current} />
+            <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>
+              <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>
+                <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />
+                <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
+              </TimeSlider.Track>
+              <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
+            </TimeSlider.Root>
+            <Time.Value type="duration" className={time.duration} />
+          </Time.Group>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PlaybackRateButton
-                render={(props) => <Button variant="icon" {...props} className={playbackRate.button} />}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PlaybackRateButton
+                  render={(props) => <Button variant="icon" {...props} className={playbackRate.button} />}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
-          <Popover.Trigger
-            render={
-              <MuteButton
-                render={(props) => (
-                  <Button variant="icon" {...props} className={iconState.mute.button}>
-                    <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
-                    <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
-                    <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Popover.Popup className={cn(popup.popover, popup.volume)}>
-            <VolumeSlider.Root
-              orientation="vertical"
-              thumbAlignment="edge"
-              render={(props) => <SliderRoot {...props} />}
-            >
-              <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>
-                <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />
-              </VolumeSlider.Track>
-              <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
-            </VolumeSlider.Root>
-          </Popover.Popup>
-        </Popover.Root>
+          <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+            <Popover.Trigger
+              render={
+                <MuteButton
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={iconState.mute.button}>
+                      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
+                      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
+                      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Popover.Popup className={cn(popup.popover, popup.volume)}>
+              <VolumeSlider.Root
+                orientation="vertical"
+                thumbAlignment="edge"
+                render={(props) => <SliderRoot {...props} />}
+              >
+                <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>
+                  <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />
+                </VolumeSlider.Track>
+                <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
+              </VolumeSlider.Root>
+            </Popover.Popup>
+          </Popover.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <CaptionsButton
-                render={(props) => (
-                  <Button variant="icon" {...props} className={iconState.captions.button}>
-                    <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
-                    <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>
-            <CaptionsLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <CaptionsButton
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={iconState.captions.button}>
+                      <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
+                      <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>
+              <CaptionsLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PiPButton
-                render={(props) => (
-                  <Button variant="icon" {...props}>
-                    <PipIcon className={icon} />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>
-            <PiPLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PiPButton
+                  render={(props) => (
+                    <Button variant="icon" {...props}>
+                      <PipIcon className={icon} />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>
+              <PiPLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <FullscreenButton
-                render={(props) => (
-                  <Button variant="icon" {...props} className={iconState.fullscreen.button}>
-                    <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
-                    <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className={cn(popup.tooltip)}>
-            <FullscreenLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <FullscreenButton
+                  render={(props) => (
+                    <Button variant="icon" {...props} className={iconState.fullscreen.button}>
+                      <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
+                      <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className={cn(popup.tooltip)}>
+              <FullscreenLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
+        </Tooltip.Provider>
       </Controls.Root>
 
       <div className={overlay} />
diff --git a/packages/react/src/presets/video/skin.tsx b/packages/react/src/presets/video/skin.tsx
index 3a7596e9..462044b8 100644
--- a/packages/react/src/presets/video/skin.tsx
+++ b/packages/react/src/presets/video/skin.tsx
@@ -93,162 +93,164 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
       <ErrorDialog classes={errorClasses} />
 
       <Controls.Root className="media-surface media-controls">
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PlayButton
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--play">
-                    <RestartIcon className="media-icon media-icon--restart" />
-                    <PlayIcon className="media-icon media-icon--play" />
-                    <PauseIcon className="media-icon media-icon--pause" />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">
-            <PlayLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+        <Tooltip.Provider>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PlayButton
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--play">
+                      <RestartIcon className="media-icon media-icon--restart" />
+                      <PlayIcon className="media-icon media-icon--play" />
+                      <PauseIcon className="media-icon media-icon--pause" />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">
+              <PlayLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <SeekButton
-                seconds={-SEEK_TIME}
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--seek">
-                    <span className="media-icon__container">
-                      <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
-                      <span className="media-icon__label">{SEEK_TIME}</span>
-                    </span>
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <SeekButton
+                  seconds={-SEEK_TIME}
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--seek">
+                      <span className="media-icon__container">
+                        <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
+                        <span className="media-icon__label">{SEEK_TIME}</span>
+                      </span>
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <SeekButton
-                seconds={SEEK_TIME}
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--seek">
-                    <span className="media-icon__container">
-                      <SeekIcon className="media-icon media-icon--seek" />
-                      <span className="media-icon__label">{SEEK_TIME}</span>
-                    </span>
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <SeekButton
+                  seconds={SEEK_TIME}
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--seek">
+                      <span className="media-icon__container">
+                        <SeekIcon className="media-icon media-icon--seek" />
+                        <span className="media-icon__label">{SEEK_TIME}</span>
+                      </span>
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Time.Group className="media-time">
-          <Time.Value type="current" className="media-time__value" />
-          <TimeSlider.Root className="media-slider">
-            <TimeSlider.Track className="media-slider__track">
-              <TimeSlider.Fill className="media-slider__fill" />
-              <TimeSlider.Buffer className="media-slider__buffer" />
-            </TimeSlider.Track>
-            <TimeSlider.Thumb className="media-slider__thumb" />
-          </TimeSlider.Root>
-          <Time.Value type="duration" className="media-time__value" />
-        </Time.Group>
+          <Time.Group className="media-time">
+            <Time.Value type="current" className="media-time__value" />
+            <TimeSlider.Root className="media-slider">
+              <TimeSlider.Track className="media-slider__track">
+                <TimeSlider.Fill className="media-slider__fill" />
+                <TimeSlider.Buffer className="media-slider__buffer" />
+              </TimeSlider.Track>
+              <TimeSlider.Thumb className="media-slider__thumb" />
+            </TimeSlider.Root>
+            <Time.Value type="duration" className="media-time__value" />
+          </Time.Group>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PlaybackRateButton
-                render={(props) => <Button {...props} className="media-button--icon media-button--playback-rate" />}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">Toggle playback rate</Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PlaybackRateButton
+                  render={(props) => <Button {...props} className="media-button--icon media-button--playback-rate" />}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">Toggle playback rate</Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
-          <Popover.Trigger
-            render={
-              <MuteButton
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--mute">
-                    <VolumeOffIcon className="media-icon media-icon--volume-off" />
-                    <VolumeLowIcon className="media-icon media-icon--volume-low" />
-                    <VolumeHighIcon className="media-icon media-icon--volume-high" />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Popover.Popup className="media-surface media-popover media-popover--volume">
-            <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
-              <VolumeSlider.Track className="media-slider__track">
-                <VolumeSlider.Fill className="media-slider__fill" />
-              </VolumeSlider.Track>
-              <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
-            </VolumeSlider.Root>
-          </Popover.Popup>
-        </Popover.Root>
+          <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+            <Popover.Trigger
+              render={
+                <MuteButton
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--mute">
+                      <VolumeOffIcon className="media-icon media-icon--volume-off" />
+                      <VolumeLowIcon className="media-icon media-icon--volume-low" />
+                      <VolumeHighIcon className="media-icon media-icon--volume-high" />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Popover.Popup className="media-surface media-popover media-popover--volume">
+              <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
+                <VolumeSlider.Track className="media-slider__track">
+                  <VolumeSlider.Fill className="media-slider__fill" />
+                </VolumeSlider.Track>
+                <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
+              </VolumeSlider.Root>
+            </Popover.Popup>
+          </Popover.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <CaptionsButton
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--captions">
-                    <CaptionsOffIcon className="media-icon media-icon--captions-off" />
-                    <CaptionsOnIcon className="media-icon media-icon--captions-on" />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">
-            <CaptionsLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <CaptionsButton
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--captions">
+                      <CaptionsOffIcon className="media-icon media-icon--captions-off" />
+                      <CaptionsOnIcon className="media-icon media-icon--captions-on" />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">
+              <CaptionsLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <PiPButton
-                render={(props) => (
-                  <Button {...props} className="media-button--icon">
-                    <PipIcon className="media-icon" />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">
-            <PiPLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <PiPButton
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon">
+                      <PipIcon className="media-icon" />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">
+              <PiPLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
 
-        <Tooltip.Root side="top">
-          <Tooltip.Trigger
-            render={
-              <FullscreenButton
-                render={(props) => (
-                  <Button {...props} className="media-button--icon media-button--fullscreen">
-                    <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
-                    <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
-                  </Button>
-                )}
-              />
-            }
-          />
-          <Tooltip.Popup className="media-surface media-tooltip">
-            <FullscreenLabel />
-          </Tooltip.Popup>
-        </Tooltip.Root>
+          <Tooltip.Root side="top">
+            <Tooltip.Trigger
+              render={
+                <FullscreenButton
+                  render={(props) => (
+                    <Button {...props} className="media-button--icon media-button--fullscreen">
+                      <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
+                      <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
+                    </Button>
+                  )}
+                />
+              }
+            />
+            <Tooltip.Popup className="media-surface media-tooltip">
+              <FullscreenLabel />
+            </Tooltip.Popup>
+          </Tooltip.Root>
+        </Tooltip.Provider>
       </Controls.Root>
 
       <div className="media-overlay" />
diff --git a/packages/skins/src/default/css/audio.css b/packages/skins/src/default/css/audio.css
index 059e8753..ad1acc0b 100644
--- a/packages/skins/src/default/css/audio.css
+++ b/packages/skins/src/default/css/audio.css
@@ -1,5 +1,5 @@
-@import "../../shared/audio/icon-state.css";
-@import "../../shared/audio/tooltip-state.css";
+@import "../../shared/css/audio/icon-state.css";
+@import "../../shared/css/audio/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/surface.css";
diff --git a/packages/skins/src/default/css/video.css b/packages/skins/src/default/css/video.css
index 0f9526d0..23d5a4be 100644
--- a/packages/skins/src/default/css/video.css
+++ b/packages/skins/src/default/css/video.css
@@ -1,5 +1,5 @@
-@import "../../shared/video/icon-state.css";
-@import "../../shared/video/tooltip-state.css";
+@import "../../shared/css/video/icon-state.css";
+@import "../../shared/css/video/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/surface.css";
diff --git a/packages/skins/src/default/tailwind/audio.tailwind.ts b/packages/skins/src/default/tailwind/audio.tailwind.ts
index d2c4dd0c..486923ab 100644
--- a/packages/skins/src/default/tailwind/audio.tailwind.ts
+++ b/packages/skins/src/default/tailwind/audio.tailwind.ts
@@ -35,41 +35,6 @@ export const slider = {
   track: cn(baseSlider.track, 'bg-black/10', 'dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]'),
 };
 
-/* ==========================================================================
-   Icon State (audio: play + mute only)
-   ========================================================================== */
-
-export const iconState = {
-  play: {
-    button: 'group',
-    restart: 'hidden opacity-0 group-data-ended:block group-data-ended:opacity-100',
-    play: 'hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100',
-    pause:
-      'hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100',
-  },
-  mute: {
-    button: 'group',
-    volumeOff: 'hidden opacity-0 group-data-muted:block group-data-muted:opacity-100',
-    volumeLow:
-      'hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100',
-    volumeHigh:
-      'hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100',
-  },
-};
-
-/* ==========================================================================
-   Tooltip State (audio: play only)
-   ========================================================================== */
-
-export const tooltipState = {
-  play: {
-    wrapper: 'contents group/play-tip',
-    replay: 'hidden group-has-data-ended/play-tip:block',
-    play: 'hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block',
-    pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block',
-  },
-};
-
 /* ==========================================================================
    Popup (with audio surface)
    ========================================================================== */
@@ -102,6 +67,8 @@ export const error = {
    Shared components (no overrides)
    ========================================================================== */
 
+export { iconState } from '../../shared/tailwind/icon-state';
+export { tooltipState } from '../../shared/tailwind/tooltip-state';
 export { button } from './components/button';
 export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
 export { playbackRate } from './components/playback-rate';
diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts
index eea1b6c7..a37f54a9 100644
--- a/packages/skins/src/default/tailwind/video.tailwind.ts
+++ b/packages/skins/src/default/tailwind/video.tailwind.ts
@@ -135,11 +135,11 @@ export const error = {
    Shared components (no overrides)
    ========================================================================== */
 
+export { iconState } from '../../shared/tailwind/icon-state';
+export { tooltipState } from '../../shared/tailwind/tooltip-state';
 export { button } from './components/button';
 export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
-export { iconState } from './components/icon-state';
 export { overlay } from './components/overlay';
 export { playbackRate } from './components/playback-rate';
 export { seek } from './components/seek';
 export { time } from './components/time';
-export { tooltipState } from './components/tooltip-state';
diff --git a/packages/skins/src/minimal/css/audio.css b/packages/skins/src/minimal/css/audio.css
index 142bff35..424c78aa 100644
--- a/packages/skins/src/minimal/css/audio.css
+++ b/packages/skins/src/minimal/css/audio.css
@@ -1,5 +1,5 @@
-@import "../../shared/audio/icon-state.css";
-@import "../../shared/audio/tooltip-state.css";
+@import "../../shared/css/audio/icon-state.css";
+@import "../../shared/css/audio/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/buffering.css";
diff --git a/packages/skins/src/minimal/css/video.css b/packages/skins/src/minimal/css/video.css
index ad07eddb..e712082f 100644
--- a/packages/skins/src/minimal/css/video.css
+++ b/packages/skins/src/minimal/css/video.css
@@ -1,5 +1,5 @@
-@import "../../shared/video/icon-state.css";
-@import "../../shared/video/tooltip-state.css";
+@import "../../shared/css/video/icon-state.css";
+@import "../../shared/css/video/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/media.css";
diff --git a/packages/skins/src/minimal/tailwind/audio.tailwind.ts b/packages/skins/src/minimal/tailwind/audio.tailwind.ts
index 185457fc..dc45f0ca 100644
--- a/packages/skins/src/minimal/tailwind/audio.tailwind.ts
+++ b/packages/skins/src/minimal/tailwind/audio.tailwind.ts
@@ -35,19 +35,6 @@ export const controls = cn(
   'ring-1 ring-(color:--media-controls-border-color)'
 );
 
-/* ==========================================================================
-   Tooltip State (audio: play only)
-   ========================================================================== */
-
-export const tooltipState = {
-  play: {
-    wrapper: 'contents group/play-tip',
-    replay: 'hidden group-has-data-ended/play-tip:block',
-    play: 'hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block',
-    pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block',
-  },
-};
-
 /* ==========================================================================
    Popup
    ========================================================================== */
@@ -61,32 +48,12 @@ export const popup = {
   ),
 };
 
-/* ==========================================================================
-   Icon State (audio: play + mute only)
-   ========================================================================== */
-
-export const iconState = {
-  play: {
-    button: 'group',
-    restart: 'hidden opacity-0 group-data-ended:block group-data-ended:opacity-100',
-    play: 'hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100',
-    pause:
-      'hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100',
-  },
-  mute: {
-    button: 'group',
-    volumeOff: 'hidden opacity-0 group-data-muted:block group-data-muted:opacity-100',
-    volumeLow:
-      'hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100',
-    volumeHigh:
-      'hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100',
-  },
-};
-
 /* ==========================================================================
    Shared components (no overrides)
    ========================================================================== */
 
+export { iconState } from '../../shared/tailwind/icon-state';
+export { tooltipState } from '../../shared/tailwind/tooltip-state';
 export { bufferingIndicator } from './components/buffering';
 export { button } from './components/button';
 export { buttonGroup } from './components/button-group';
diff --git a/packages/skins/src/minimal/tailwind/components/icon-state.ts b/packages/skins/src/minimal/tailwind/components/icon-state.ts
deleted file mode 100644
index 309df24a..00000000
--- a/packages/skins/src/minimal/tailwind/components/icon-state.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export const iconState = {
-  play: {
-    button: 'group',
-    restart: 'hidden opacity-0 group-data-ended:block group-data-ended:opacity-100',
-    play: 'hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100',
-    pause:
-      'hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100',
-  },
-  mute: {
-    button: 'group',
-    volumeOff: 'hidden opacity-0 group-data-muted:block group-data-muted:opacity-100',
-    volumeLow:
-      'hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100',
-    volumeHigh:
-      'hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100',
-  },
-  fullscreen: {
-    button: 'group',
-    enter: 'hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100',
-    exit: 'hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100',
-  },
-  captions: {
-    button: 'group',
-    off: 'hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100',
-    on: 'hidden opacity-0 group-data-active:block group-data-active:opacity-100',
-  },
-};
diff --git a/packages/skins/src/minimal/tailwind/components/tooltip-state.ts b/packages/skins/src/minimal/tailwind/components/tooltip-state.ts
deleted file mode 100644
index a0399f4e..00000000
--- a/packages/skins/src/minimal/tailwind/components/tooltip-state.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export const tooltipState = {
-  play: {
-    wrapper: 'contents group/play-tip',
-    replay: 'hidden group-has-data-ended/play-tip:block',
-    play: 'hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block',
-    pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block',
-  },
-  fullscreen: {
-    wrapper: 'contents group/fullscreen-tip',
-    enter: 'hidden group-[:not(:has([data-fullscreen]))]/fullscreen-tip:block',
-    exit: 'hidden group-has-data-fullscreen/fullscreen-tip:block',
-  },
-  captions: {
-    wrapper: 'contents group/captions-tip',
-    enable: 'hidden group-[:not(:has([data-active]))]/captions-tip:block',
-    disable: 'hidden group-has-data-active/captions-tip:block',
-  },
-  pip: {
-    wrapper: 'contents group/pip-tip',
-    enter: 'hidden group-[:not(:has([data-pip]))]/pip-tip:block',
-    exit: 'hidden group-has-data-pip/pip-tip:block',
-  },
-};
diff --git a/packages/skins/src/minimal/tailwind/video.tailwind.ts b/packages/skins/src/minimal/tailwind/video.tailwind.ts
index 7d638243..b6642cd9 100644
--- a/packages/skins/src/minimal/tailwind/video.tailwind.ts
+++ b/packages/skins/src/minimal/tailwind/video.tailwind.ts
@@ -99,13 +99,13 @@ export const popup = {
    Shared components (no overrides)
    ========================================================================== */
 
+export { iconState } from '../../shared/tailwind/icon-state';
+export { tooltipState } from '../../shared/tailwind/tooltip-state';
 export { bufferingIndicator } from './components/buffering';
 export { button } from './components/button';
 export { buttonGroup } from './components/button-group';
 export { error } from './components/error';
 export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
-export { iconState } from './components/icon-state';
 export { overlay } from './components/overlay';
 export { seek } from './components/seek';
 export { time } from './components/time';
-export { tooltipState } from './components/tooltip-state';
diff --git a/packages/skins/src/shared/audio/icon-state.css b/packages/skins/src/shared/css/audio/icon-state.css
similarity index 100%
rename from packages/skins/src/shared/audio/icon-state.css
rename to packages/skins/src/shared/css/audio/icon-state.css
diff --git a/packages/skins/src/shared/audio/tooltip-state.css b/packages/skins/src/shared/css/audio/tooltip-state.css
similarity index 100%
rename from packages/skins/src/shared/audio/tooltip-state.css
rename to packages/skins/src/shared/css/audio/tooltip-state.css
diff --git a/packages/skins/src/shared/video/icon-state.css b/packages/skins/src/shared/css/video/icon-state.css
similarity index 100%
rename from packages/skins/src/shared/video/icon-state.css
rename to packages/skins/src/shared/css/video/icon-state.css
diff --git a/packages/skins/src/shared/video/tooltip-state.css b/packages/skins/src/shared/css/video/tooltip-state.css
similarity index 100%
rename from packages/skins/src/shared/video/tooltip-state.css
rename to packages/skins/src/shared/css/video/tooltip-state.css
diff --git a/packages/skins/src/default/tailwind/components/icon-state.ts b/packages/skins/src/shared/tailwind/icon-state.ts
similarity index 88%
rename from packages/skins/src/default/tailwind/components/icon-state.ts
rename to packages/skins/src/shared/tailwind/icon-state.ts
index 309df24a..41613554 100644
--- a/packages/skins/src/default/tailwind/components/icon-state.ts
+++ b/packages/skins/src/shared/tailwind/icon-state.ts
@@ -1,3 +1,7 @@
+/* ==========================================================================
+   Icon State
+   ========================================================================== */
+
 export const iconState = {
   play: {
     button: 'group',
diff --git a/packages/skins/src/default/tailwind/components/tooltip-state.ts b/packages/skins/src/shared/tailwind/tooltip-state.ts
similarity index 100%
rename from packages/skins/src/default/tailwind/components/tooltip-state.ts
rename to packages/skins/src/shared/tailwind/tooltip-state.ts