From f98ddc97bcd803b27f4c2424102a588429127f60 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Tue, 10 Mar 2026 14:22:29 +1100
Subject: [PATCH] chore(skin): refactor tooltip/popover styles/classnames
 (#801)

---
 .../src/define/audio/minimal-skin.tailwind.ts | 10 +++----
 .../html/src/define/audio/minimal-skin.ts     | 10 +++----
 .../html/src/define/audio/skin.tailwind.ts    | 10 +++----
 packages/html/src/define/audio/skin.ts        | 10 +++----
 .../src/define/video/minimal-skin.tailwind.ts | 16 +++++-----
 .../html/src/define/video/minimal-skin.ts     | 16 +++++-----
 .../html/src/define/video/skin.tailwind.ts    | 16 +++++-----
 packages/html/src/define/video/skin.ts        | 16 +++++-----
 .../presets/audio/minimal-skin.tailwind.tsx   | 10 +++----
 .../react/src/presets/audio/minimal-skin.tsx  | 12 ++++----
 .../react/src/presets/audio/skin.tailwind.tsx | 10 +++----
 packages/react/src/presets/audio/skin.tsx     | 14 ++++-----
 .../presets/video/minimal-skin.tailwind.tsx   | 16 +++++-----
 .../react/src/presets/video/minimal-skin.tsx  | 18 +++++-------
 .../react/src/presets/video/skin.tailwind.tsx | 16 +++++-----
 packages/react/src/presets/video/skin.tsx     | 20 +++++--------
 packages/skins/src/default/css/audio.css      |  4 +--
 .../src/default/css/components/popup.css      | 16 +++++-----
 packages/skins/src/default/css/video.css      |  4 +--
 .../src/default/tailwind/audio.tailwind.ts    |  3 +-
 .../src/default/tailwind/components/popup.ts  | 29 +++++++++++--------
 .../tailwind/components/tooltip-state.ts      | 12 ++++----
 .../src/default/tailwind/video.tailwind.ts    |  3 +-
 packages/skins/src/minimal/css/audio.css      |  6 ++--
 .../src/minimal/css/components/popup.css      |  5 ++--
 packages/skins/src/minimal/css/video.css      |  6 ++--
 .../src/minimal/tailwind/components/popup.ts  | 26 +++++++++--------
 .../tailwind/components/tooltip-state.ts      | 12 ++++----
 .../icon-state.css}                           |  0
 .../skins/src/shared/audio/tooltip-state.css  | 25 ++++++++++++++++
 .../icon-state.css}                           |  0
 .../src/shared/{ => video}/tooltip-state.css  | 20 ++++++-------
 32 files changed, 207 insertions(+), 184 deletions(-)
 rename packages/skins/src/shared/{audio-icon-state.css => audio/icon-state.css} (100%)
 create mode 100644 packages/skins/src/shared/audio/tooltip-state.css
 rename packages/skins/src/shared/{video-icon-state.css => video/icon-state.css} (100%)
 rename packages/skins/src/shared/{ => video}/tooltip-state.css (63%)

diff --git a/packages/html/src/define/audio/minimal-skin.tailwind.ts b/packages/html/src/define/audio/minimal-skin.tailwind.ts
index dec1ea14..53c7af22 100644
--- a/packages/html/src/define/audio/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/audio/minimal-skin.tailwind.ts
@@ -46,7 +46,7 @@ function getTemplateHTML() {
               ${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.base, popup.tooltip)}">
+            <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>
@@ -59,7 +59,7 @@ function getTemplateHTML() {
               <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.base, popup.tooltip)}">
+          <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
             Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
 
@@ -69,7 +69,7 @@ function getTemplateHTML() {
               <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.base, popup.tooltip)}">
+          <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
             Seek forward ${SEEK_TIME} seconds
           </media-tooltip>
         </span>
@@ -93,7 +93,7 @@ function getTemplateHTML() {
         <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.base, popup.tooltip)}">
+          <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
             Toggle playback rate
           </media-tooltip>
 
@@ -103,7 +103,7 @@ function getTemplateHTML() {
             ${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.base, popup.volume)}">
+          <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>
diff --git a/packages/html/src/define/audio/minimal-skin.ts b/packages/html/src/define/audio/minimal-skin.ts
index 0e13fc63..7b1abcfb 100644
--- a/packages/html/src/define/audio/minimal-skin.ts
+++ b/packages/html/src/define/audio/minimal-skin.ts
@@ -29,7 +29,7 @@ function getTemplateHTML() {
             ${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-popup media-popup--tooltip">
+          <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>
@@ -41,7 +41,7 @@ function getTemplateHTML() {
               <span class="media-icon__label">${SEEK_TIME}</span>
             </span>
           </media-seek-button>
-          <media-tooltip id="seek-backward-tooltip" side="top" class="media-popup media-popup--tooltip">
+          <media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
             Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
 
@@ -51,7 +51,7 @@ function getTemplateHTML() {
               <span class="media-icon__label">${SEEK_TIME}</span>
             </span>
           </media-seek-button>
-          <media-tooltip id="seek-forward-tooltip" side="top" class="media-popup media-popup--tooltip">
+          <media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
             Seek forward ${SEEK_TIME} seconds
           </media-tooltip>
         </span>
@@ -75,7 +75,7 @@ function getTemplateHTML() {
         <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-popup media-popup--tooltip">
+          <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
             Toggle playback rate
           </media-tooltip>
 
@@ -85,7 +85,7 @@ function getTemplateHTML() {
             ${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-popup media-popup--popover media-popup--volume">
+          <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>
diff --git a/packages/html/src/define/audio/skin.tailwind.ts b/packages/html/src/define/audio/skin.tailwind.ts
index 16244124..2538a7a0 100644
--- a/packages/html/src/define/audio/skin.tailwind.ts
+++ b/packages/html/src/define/audio/skin.tailwind.ts
@@ -44,7 +44,7 @@ function getTemplateHTML() {
             ${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.base, popup.tooltip)}">
+          <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>
@@ -57,7 +57,7 @@ function getTemplateHTML() {
             <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.base, popup.tooltip)}">
+        <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
           Seek backward ${SEEK_TIME} seconds
         </media-tooltip>
 
@@ -67,7 +67,7 @@ function getTemplateHTML() {
             <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.base, popup.tooltip)}">
+        <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
           Seek forward ${SEEK_TIME} seconds
         </media-tooltip>
 
@@ -84,7 +84,7 @@ function getTemplateHTML() {
         </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.base, popup.tooltip)}">
+        <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
           Toggle playback rate
         </media-tooltip>
 
@@ -94,7 +94,7 @@ function getTemplateHTML() {
           ${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.base, popup.popover, popup.volume)}">
+        <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>
diff --git a/packages/html/src/define/audio/skin.ts b/packages/html/src/define/audio/skin.ts
index 19310086..7688bbce 100644
--- a/packages/html/src/define/audio/skin.ts
+++ b/packages/html/src/define/audio/skin.ts
@@ -28,7 +28,7 @@ function getTemplateHTML() {
           ${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-popup media-popup--tooltip">
+        <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>
@@ -40,7 +40,7 @@ function getTemplateHTML() {
             <span class="media-icon__label">${SEEK_TIME}</span>
           </span>
         </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-popup media-popup--tooltip">
+        <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
           Seek backward ${SEEK_TIME} seconds
         </media-tooltip>
 
@@ -50,7 +50,7 @@ function getTemplateHTML() {
             <span class="media-icon__label">${SEEK_TIME}</span>
           </span>
         </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-popup media-popup--tooltip">
+        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
           Seek forward ${SEEK_TIME} seconds
         </media-tooltip>
 
@@ -67,7 +67,7 @@ function getTemplateHTML() {
         </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-popup media-popup--tooltip">
+        <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
           Toggle playback rate
         </media-tooltip>
 
@@ -77,7 +77,7 @@ function getTemplateHTML() {
           ${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-popup media-popup--popover media-popup--volume">
+        <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>
diff --git a/packages/html/src/define/video/minimal-skin.tailwind.ts b/packages/html/src/define/video/minimal-skin.tailwind.ts
index 84e95f31..77f53ae0 100644
--- a/packages/html/src/define/video/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/video/minimal-skin.tailwind.ts
@@ -70,7 +70,7 @@ function getTemplateHTML() {
               ${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.base, popup.tooltip)}">
+            <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>
@@ -83,7 +83,7 @@ function getTemplateHTML() {
               <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.base, popup.tooltip)}">
+          <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
             Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
 
@@ -93,7 +93,7 @@ function getTemplateHTML() {
               <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.base, popup.tooltip)}">
+          <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
             Seek forward ${SEEK_TIME} seconds
           </media-tooltip>
         </span>
@@ -117,7 +117,7 @@ function getTemplateHTML() {
         <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.base, popup.tooltip)}">
+          <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
             Toggle playback rate
           </media-tooltip>
 
@@ -127,7 +127,7 @@ function getTemplateHTML() {
             ${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.base, popup.volume)}">
+          <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>
@@ -141,7 +141,7 @@ function getTemplateHTML() {
               ${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.base, popup.tooltip)}">
+            <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>
@@ -151,7 +151,7 @@ function getTemplateHTML() {
             <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.base, popup.tooltip)}">
+            <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>
@@ -162,7 +162,7 @@ function getTemplateHTML() {
               ${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.base, popup.tooltip)}">
+            <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>
diff --git a/packages/html/src/define/video/minimal-skin.ts b/packages/html/src/define/video/minimal-skin.ts
index c7bc1bee..e60608a4 100644
--- a/packages/html/src/define/video/minimal-skin.ts
+++ b/packages/html/src/define/video/minimal-skin.ts
@@ -49,7 +49,7 @@ function getTemplateHTML() {
             ${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-popup media-popup--tooltip">
+          <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>
@@ -61,7 +61,7 @@ function getTemplateHTML() {
               <span class="media-icon__label">${SEEK_TIME}</span>
             </span>
           </media-seek-button>
-          <media-tooltip id="seek-backward-tooltip" side="top" class="media-popup media-popup--tooltip">
+          <media-tooltip id="seek-backward-tooltip" side="top" class="media-tooltip">
             Seek backward ${SEEK_TIME} seconds
           </media-tooltip>
 
@@ -71,7 +71,7 @@ function getTemplateHTML() {
               <span class="media-icon__label">${SEEK_TIME}</span>
             </span>
           </media-seek-button>
-          <media-tooltip id="seek-forward-tooltip" side="top" class="media-popup media-popup--tooltip">
+          <media-tooltip id="seek-forward-tooltip" side="top" class="media-tooltip">
             Seek forward ${SEEK_TIME} seconds
           </media-tooltip>
         </span>
@@ -94,7 +94,7 @@ function getTemplateHTML() {
 
         <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-popup media-popup--tooltip">
+          <media-tooltip id="playback-rate-tooltip" side="top" class="media-tooltip">
             Toggle playback rate
           </media-tooltip>
 
@@ -104,7 +104,7 @@ function getTemplateHTML() {
             ${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-popup media-popup--popover media-popup--volume">
+          <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>
@@ -117,14 +117,14 @@ function getTemplateHTML() {
             ${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-popup media-popup--tooltip">
+          <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-popup media-popup--tooltip">
+          <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>
@@ -133,7 +133,7 @@ function getTemplateHTML() {
             ${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-popup media-popup--tooltip">
+          <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>
diff --git a/packages/html/src/define/video/skin.tailwind.ts b/packages/html/src/define/video/skin.tailwind.ts
index 4837bd93..b3ff30e0 100644
--- a/packages/html/src/define/video/skin.tailwind.ts
+++ b/packages/html/src/define/video/skin.tailwind.ts
@@ -70,7 +70,7 @@ function getTemplateHTML() {
             ${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.base, popup.tooltip)}">
+          <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>
@@ -83,7 +83,7 @@ function getTemplateHTML() {
             <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.base, popup.tooltip)}">
+        <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
           Seek backward ${SEEK_TIME} seconds
         </media-tooltip>
 
@@ -93,7 +93,7 @@ function getTemplateHTML() {
             <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.base, popup.tooltip)}">
+        <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
           Seek forward ${SEEK_TIME} seconds
         </media-tooltip>
 
@@ -110,7 +110,7 @@ function getTemplateHTML() {
         </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.base, popup.tooltip)}">
+        <media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}">
           Toggle playback rate
         </media-tooltip>
 
@@ -120,7 +120,7 @@ function getTemplateHTML() {
           ${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.base, popup.popover, popup.volume)}">
+        <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>
@@ -134,7 +134,7 @@ function getTemplateHTML() {
             ${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.base, popup.tooltip)}">
+          <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>
@@ -144,7 +144,7 @@ function getTemplateHTML() {
           <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.base, popup.tooltip)}">
+          <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>
@@ -155,7 +155,7 @@ function getTemplateHTML() {
             ${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.base, popup.tooltip)}">
+          <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>
diff --git a/packages/html/src/define/video/skin.ts b/packages/html/src/define/video/skin.ts
index 30612022..21780e20 100644
--- a/packages/html/src/define/video/skin.ts
+++ b/packages/html/src/define/video/skin.ts
@@ -51,7 +51,7 @@ function getTemplateHTML() {
           ${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-popup media-popup--tooltip">
+        <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>
@@ -63,7 +63,7 @@ function getTemplateHTML() {
             <span class="media-icon__label">${SEEK_TIME}</span>
           </span>
         </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-popup media-popup--tooltip">
+        <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
           Seek backward ${SEEK_TIME} seconds
         </media-tooltip>
 
@@ -73,7 +73,7 @@ function getTemplateHTML() {
             <span class="media-icon__label">${SEEK_TIME}</span>
           </span>
         </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-popup media-popup--tooltip">
+        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
           Seek forward ${SEEK_TIME} seconds
         </media-tooltip>
 
@@ -90,7 +90,7 @@ function getTemplateHTML() {
         </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-popup media-popup--tooltip">
+        <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
           Toggle playback rate
         </media-tooltip>
 
@@ -100,7 +100,7 @@ function getTemplateHTML() {
           ${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-popup media-popup--popover media-popup--volume">
+        <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>
@@ -113,7 +113,7 @@ function getTemplateHTML() {
           ${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-popup media-popup--tooltip">
+        <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>
@@ -121,7 +121,7 @@ function getTemplateHTML() {
         <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-surface media-popup media-popup--tooltip">
+        <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>
@@ -130,7 +130,7 @@ function getTemplateHTML() {
           ${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-popup media-popup--tooltip">
+        <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>
diff --git a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
index c6552d63..20547621 100644
--- a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
@@ -123,7 +123,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+            <Tooltip.Popup className={cn(popup.tooltip)}>
               <PlayLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
@@ -144,7 +144,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+            <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
           </Tooltip.Root>
 
           <Tooltip.Root side="top">
@@ -163,7 +163,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+            <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
           </Tooltip.Root>
         </span>
 
@@ -192,7 +192,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
+            <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
           </Tooltip.Root>
 
           <Popover.Root openOnHover delay={200} closeDelay={100} side="left">
@@ -209,7 +209,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
                 />
               }
             />
-            <Popover.Popup className={cn(popup.base, popup.volume)}>
+            <Popover.Popup className={cn(popup.volume)}>
               <VolumeSlider.Root
                 orientation="horizontal"
                 thumbAlignment="edge"
diff --git a/packages/react/src/presets/audio/minimal-skin.tsx b/packages/react/src/presets/audio/minimal-skin.tsx
index 2a758ea4..45499dd8 100644
--- a/packages/react/src/presets/audio/minimal-skin.tsx
+++ b/packages/react/src/presets/audio/minimal-skin.tsx
@@ -59,7 +59,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">
+            <Tooltip.Popup className="media-tooltip">
               <PlayLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
@@ -80,9 +80,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">
-              Seek backward {SEEK_TIME} seconds
-            </Tooltip.Popup>
+            <Tooltip.Popup className="media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
           </Tooltip.Root>
 
           <Tooltip.Root side="top">
@@ -101,7 +99,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+            <Tooltip.Popup className="media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
           </Tooltip.Root>
         </span>
 
@@ -130,7 +128,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">Toggle playback rate</Tooltip.Popup>
+            <Tooltip.Popup className="media-tooltip">Toggle playback rate</Tooltip.Popup>
           </Tooltip.Root>
 
           <Popover.Root openOnHover delay={200} closeDelay={100} side="left">
@@ -147,7 +145,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
                 />
               }
             />
-            <Popover.Popup className="media-popup media-popup--popover media-popup--volume">
+            <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" />
diff --git a/packages/react/src/presets/audio/skin.tailwind.tsx b/packages/react/src/presets/audio/skin.tailwind.tsx
index afc100ea..e4f3a3d6 100644
--- a/packages/react/src/presets/audio/skin.tailwind.tsx
+++ b/packages/react/src/presets/audio/skin.tailwind.tsx
@@ -121,7 +121,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+          <Tooltip.Popup className={cn(popup.tooltip)}>
             <PlayLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
@@ -142,7 +142,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+          <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
         </Tooltip.Root>
 
         <Tooltip.Root side="top">
@@ -161,7 +161,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+          <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
         </Tooltip.Root>
 
         <Time.Group className={time.group}>
@@ -184,7 +184,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
+          <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
         </Tooltip.Root>
 
         <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
@@ -201,7 +201,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Popover.Popup className={cn(popup.base, popup.popover, popup.volume)}>
+          <Popover.Popup className={cn(popup.popover, popup.volume)}>
             <VolumeSlider.Root
               orientation="vertical"
               thumbAlignment="edge"
diff --git a/packages/react/src/presets/audio/skin.tsx b/packages/react/src/presets/audio/skin.tsx
index 0929a17f..045da05c 100644
--- a/packages/react/src/presets/audio/skin.tsx
+++ b/packages/react/src/presets/audio/skin.tsx
@@ -58,7 +58,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">
+          <Tooltip.Popup className="media-surface media-tooltip">
             <PlayLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
@@ -79,9 +79,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">
-            Seek backward {SEEK_TIME} seconds
-          </Tooltip.Popup>
+          <Tooltip.Popup className="media-surface media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
         </Tooltip.Root>
 
         <Tooltip.Root side="top">
@@ -100,9 +98,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">
-            Seek forward {SEEK_TIME} seconds
-          </Tooltip.Popup>
+          <Tooltip.Popup className="media-surface media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
         </Tooltip.Root>
 
         <Time.Group className="media-time">
@@ -125,7 +121,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">Toggle playback rate</Tooltip.Popup>
+          <Tooltip.Popup className="media-surface media-tooltip">Toggle playback rate</Tooltip.Popup>
         </Tooltip.Root>
 
         <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
@@ -142,7 +138,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
               />
             }
           />
-          <Popover.Popup className="media-surface media-popup media-popup--popover media-popup--volume">
+          <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" />
diff --git a/packages/react/src/presets/video/minimal-skin.tailwind.tsx b/packages/react/src/presets/video/minimal-skin.tailwind.tsx
index 2f7bb395..8104d7f8 100644
--- a/packages/react/src/presets/video/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/video/minimal-skin.tailwind.tsx
@@ -175,7 +175,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+            <Tooltip.Popup className={cn(popup.tooltip)}>
               <PlayLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
@@ -196,7 +196,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+            <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
           </Tooltip.Root>
 
           <Tooltip.Root side="top">
@@ -215,7 +215,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+            <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
           </Tooltip.Root>
         </span>
 
@@ -244,7 +244,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
+            <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
           </Tooltip.Root>
 
           <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
@@ -261,7 +261,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 />
               }
             />
-            <Popover.Popup className={cn(popup.base, popup.volume)}>
+            <Popover.Popup className={cn(popup.volume)}>
               <VolumeSlider.Root
                 orientation="vertical"
                 thumbAlignment="edge"
@@ -288,7 +288,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+            <Tooltip.Popup className={cn(popup.tooltip)}>
               <CaptionsLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
@@ -305,7 +305,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+            <Tooltip.Popup className={cn(popup.tooltip)}>
               <PiPLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
@@ -323,7 +323,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 />
               }
             />
-            <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+            <Tooltip.Popup className={cn(popup.tooltip)}>
               <FullscreenLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
diff --git a/packages/react/src/presets/video/minimal-skin.tsx b/packages/react/src/presets/video/minimal-skin.tsx
index 7d01964d..a1661986 100644
--- a/packages/react/src/presets/video/minimal-skin.tsx
+++ b/packages/react/src/presets/video/minimal-skin.tsx
@@ -106,7 +106,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">
+            <Tooltip.Popup className="media-tooltip">
               <PlayLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
@@ -127,9 +127,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">
-              Seek backward {SEEK_TIME} seconds
-            </Tooltip.Popup>
+            <Tooltip.Popup className="media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
           </Tooltip.Root>
 
           <Tooltip.Root side="top">
@@ -148,7 +146,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+            <Tooltip.Popup className="media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
           </Tooltip.Root>
         </span>
 
@@ -177,7 +175,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">Toggle playback rate</Tooltip.Popup>
+            <Tooltip.Popup className="media-tooltip">Toggle playback rate</Tooltip.Popup>
           </Tooltip.Root>
 
           <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
@@ -194,7 +192,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 />
               }
             />
-            <Popover.Popup className="media-popup media-popup--popover media-popup--volume">
+            <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" />
@@ -217,7 +215,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">
+            <Tooltip.Popup className="media-tooltip">
               <CaptionsLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
@@ -234,7 +232,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">
+            <Tooltip.Popup className="media-tooltip">
               <PiPLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
@@ -252,7 +250,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 />
               }
             />
-            <Tooltip.Popup className="media-popup media-popup--tooltip">
+            <Tooltip.Popup className="media-tooltip">
               <FullscreenLabel />
             </Tooltip.Popup>
           </Tooltip.Root>
diff --git a/packages/react/src/presets/video/skin.tailwind.tsx b/packages/react/src/presets/video/skin.tailwind.tsx
index 00851950..638836a9 100644
--- a/packages/react/src/presets/video/skin.tailwind.tsx
+++ b/packages/react/src/presets/video/skin.tailwind.tsx
@@ -176,7 +176,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+          <Tooltip.Popup className={cn(popup.tooltip)}>
             <PlayLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
@@ -197,7 +197,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
+          <Tooltip.Popup className={cn(popup.tooltip)}>Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
         </Tooltip.Root>
 
         <Tooltip.Root side="top">
@@ -216,7 +216,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
+          <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
         </Tooltip.Root>
 
         <Time.Group className={time.group}>
@@ -239,7 +239,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
+          <Tooltip.Popup className={cn(popup.tooltip)}>Toggle playback rate</Tooltip.Popup>
         </Tooltip.Root>
 
         <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
@@ -256,7 +256,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Popover.Popup className={cn(popup.base, popup.popover, popup.volume)}>
+          <Popover.Popup className={cn(popup.popover, popup.volume)}>
             <VolumeSlider.Root
               orientation="vertical"
               thumbAlignment="edge"
@@ -283,7 +283,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+          <Tooltip.Popup className={cn(popup.tooltip)}>
             <CaptionsLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
@@ -300,7 +300,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+          <Tooltip.Popup className={cn(popup.tooltip)}>
             <PiPLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
@@ -318,7 +318,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className={cn(popup.base, popup.tooltip)}>
+          <Tooltip.Popup className={cn(popup.tooltip)}>
             <FullscreenLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
diff --git a/packages/react/src/presets/video/skin.tsx b/packages/react/src/presets/video/skin.tsx
index f0b2331f..5e3fcd5e 100644
--- a/packages/react/src/presets/video/skin.tsx
+++ b/packages/react/src/presets/video/skin.tsx
@@ -107,7 +107,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">
+          <Tooltip.Popup className="media-surface media-tooltip">
             <PlayLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
@@ -128,9 +128,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">
-            Seek backward {SEEK_TIME} seconds
-          </Tooltip.Popup>
+          <Tooltip.Popup className="media-surface media-tooltip">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>
         </Tooltip.Root>
 
         <Tooltip.Root side="top">
@@ -149,9 +147,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">
-            Seek forward {SEEK_TIME} seconds
-          </Tooltip.Popup>
+          <Tooltip.Popup className="media-surface media-tooltip">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>
         </Tooltip.Root>
 
         <Time.Group className="media-time">
@@ -174,7 +170,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">Toggle playback rate</Tooltip.Popup>
+          <Tooltip.Popup className="media-surface media-tooltip">Toggle playback rate</Tooltip.Popup>
         </Tooltip.Root>
 
         <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
@@ -191,7 +187,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Popover.Popup className="media-surface media-popup media-popup--popover media-popup--volume">
+          <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" />
@@ -214,7 +210,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">
+          <Tooltip.Popup className="media-surface media-tooltip">
             <CaptionsLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
@@ -231,7 +227,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">
+          <Tooltip.Popup className="media-surface media-tooltip">
             <PiPLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
@@ -249,7 +245,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
               />
             }
           />
-          <Tooltip.Popup className="media-surface media-popup media-popup--tooltip">
+          <Tooltip.Popup className="media-surface media-tooltip">
             <FullscreenLabel />
           </Tooltip.Popup>
         </Tooltip.Root>
diff --git a/packages/skins/src/default/css/audio.css b/packages/skins/src/default/css/audio.css
index a8c2ef06..56264b9c 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/tooltip-state.css";
+@import "../../shared/audio/icon-state.css";
+@import "../../shared/audio/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/surface.css";
diff --git a/packages/skins/src/default/css/components/popup.css b/packages/skins/src/default/css/components/popup.css
index 7409d1c9..ab28d3a3 100644
--- a/packages/skins/src/default/css/components/popup.css
+++ b/packages/skins/src/default/css/components/popup.css
@@ -2,7 +2,8 @@
    Popups & Tooltips
    ========================================================================== */
 
-.media-default-skin .media-popup {
+.media-default-skin .media-popover,
+.media-default-skin .media-tooltip {
   margin: 0;
   border: 0;
   color: inherit;
@@ -35,19 +36,18 @@
   }
 }
 
-.media-default-skin .media-popup--popover {
+.media-default-skin .media-popover {
   --media-popover-side-offset: 0.5rem;
 }
+.media-default-skin .media-popover--volume {
+  padding: 0.625rem 0.25rem;
+  border-radius: calc(infinity * 1px);
+}
 
-.media-default-skin .media-popup--tooltip {
+.media-default-skin .media-tooltip {
   padding: 0.25rem 0.625rem;
   border-radius: calc(infinity * 1px);
   font-size: 0.75rem;
   white-space: nowrap;
   --media-tooltip-side-offset: 0.5rem;
 }
-
-.media-default-skin .media-popup--volume {
-  padding: 0.625rem 0.25rem;
-  border-radius: calc(infinity * 1px);
-}
diff --git a/packages/skins/src/default/css/video.css b/packages/skins/src/default/css/video.css
index b86fd9f9..e161a7fc 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/tooltip-state.css";
+@import "../../shared/video/icon-state.css";
+@import "../../shared/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 a0ec165a..d2c4dd0c 100644
--- a/packages/skins/src/default/tailwind/audio.tailwind.ts
+++ b/packages/skins/src/default/tailwind/audio.tailwind.ts
@@ -76,7 +76,8 @@ export const tooltipState = {
 
 export const popup = {
   ...basePopup,
-  base: cn(basePopup.base, surface),
+  popover: cn(surface, basePopup.popover),
+  tooltip: cn(surface, basePopup.tooltip),
 };
 
 /* ==========================================================================
diff --git a/packages/skins/src/default/tailwind/components/popup.ts b/packages/skins/src/default/tailwind/components/popup.ts
index 72e030fe..331d43b8 100644
--- a/packages/skins/src/default/tailwind/components/popup.ts
+++ b/packages/skins/src/default/tailwind/components/popup.ts
@@ -1,18 +1,23 @@
 import { cn } from '@videojs/utils/style';
 
+const base = cn(
+  // Reset default popover styles
+  'm-0 border-0 text-inherit overflow-visible',
+  // Animation
+  'transition-[transform,scale,opacity,filter] duration-200',
+  'data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm',
+  'data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm',
+  'data-instant:duration-0',
+  // Ensure we animate from the correct origin based on the side the popover is on
+  'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left'
+);
+
 export const popup = {
-  base: cn(
-    // Reset default popover styles
-    'm-0 border-0 text-inherit overflow-visible',
-    // Animation
-    'transition-[transform,scale,opacity,filter] duration-200',
-    'data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm',
-    'data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm',
-    'data-instant:duration-0',
-    // Ensure we animate from the correct origin based on the side the popover is on
-    'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left'
+  popover: cn(base, '[--media-popover-side-offset:0.5rem]'),
+  tooltip: cn(
+    base,
+    'py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap',
+    '[--media-tooltip-side-offset:0.5rem]'
   ),
-  popover: '[--media-popover-side-offset:0.5rem]',
-  tooltip: cn('py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap', '[--media-tooltip-side-offset:0.5rem]'),
   volume: 'py-2.5 px-1 rounded-full',
 };
diff --git a/packages/skins/src/default/tailwind/components/tooltip-state.ts b/packages/skins/src/default/tailwind/components/tooltip-state.ts
index 463d2513..a0399f4e 100644
--- a/packages/skins/src/default/tailwind/components/tooltip-state.ts
+++ b/packages/skins/src/default/tailwind/components/tooltip-state.ts
@@ -6,14 +6,14 @@ export const tooltipState = {
     pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block',
   },
   fullscreen: {
-    wrapper: 'contents group/fs-tip',
-    enter: 'hidden group-[:not(:has([data-fullscreen]))]/fs-tip:block',
-    exit: 'hidden group-has-data-fullscreen/fs-tip:block',
+    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/cc-tip',
-    enable: 'hidden group-[:not(:has([data-active]))]/cc-tip:block',
-    disable: 'hidden group-has-data-active/cc-tip:block',
+    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',
diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts
index f72f8a7e..03aaf857 100644
--- a/packages/skins/src/default/tailwind/video.tailwind.ts
+++ b/packages/skins/src/default/tailwind/video.tailwind.ts
@@ -109,7 +109,8 @@ export const slider = {
 
 export const popup = {
   ...basePopup,
-  base: cn(basePopup.base, surface),
+  popover: cn(surface, basePopup.popover),
+  tooltip: cn(surface, basePopup.tooltip),
 };
 
 /* ==========================================================================
diff --git a/packages/skins/src/minimal/css/audio.css b/packages/skins/src/minimal/css/audio.css
index bf41d820..8f644366 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/tooltip-state.css";
+@import "../../shared/audio/icon-state.css";
+@import "../../shared/audio/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/buffering.css";
@@ -40,7 +40,7 @@
    Popups & Animations
    ========================================================================== */
 
-.media-minimal-skin--audio .media-popup--volume {
+.media-minimal-skin--audio .media-popover--volume {
   background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%);
   padding: 0.5rem 0 0.5rem 4rem;
   --media-popover-side-offset: 0.75rem;
diff --git a/packages/skins/src/minimal/css/components/popup.css b/packages/skins/src/minimal/css/components/popup.css
index dfd21e8d..e01614e0 100644
--- a/packages/skins/src/minimal/css/components/popup.css
+++ b/packages/skins/src/minimal/css/components/popup.css
@@ -2,7 +2,8 @@
    Popups & Animations
    ========================================================================== */
 
-.media-minimal-skin .media-popup {
+.media-minimal-skin .media-popover,
+.media-minimal-skin .media-tooltip {
   margin: 0;
   border: 0;
   color: inherit;
@@ -35,7 +36,7 @@
   }
 }
 
-.media-minimal-skin .media-popup--tooltip {
+.media-minimal-skin .media-tooltip {
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   background-color: oklch(1 0 0 / 0.1);
diff --git a/packages/skins/src/minimal/css/video.css b/packages/skins/src/minimal/css/video.css
index 7599a723..ad07eddb 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/tooltip-state.css";
+@import "../../shared/video/icon-state.css";
+@import "../../shared/video/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/media.css";
@@ -94,7 +94,7 @@
    Popups & Animations
    ========================================================================== */
 
-.media-minimal-skin--video .media-popup--volume {
+.media-minimal-skin--video .media-popover--volume {
   --media-popover-side-offset: 0.5rem;
   background: transparent;
   padding: 0.25rem;
diff --git a/packages/skins/src/minimal/tailwind/components/popup.ts b/packages/skins/src/minimal/tailwind/components/popup.ts
index cb455de7..57a32120 100644
--- a/packages/skins/src/minimal/tailwind/components/popup.ts
+++ b/packages/skins/src/minimal/tailwind/components/popup.ts
@@ -1,20 +1,22 @@
 import { cn } from '@videojs/utils/style';
 
+const base = cn(
+  // Reset default popover styles
+  'm-0 border-0 text-inherit overflow-visible',
+  // Animation
+  'transition-[transform,scale,opacity,filter] duration-200',
+  'data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm',
+  'data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm',
+  'data-instant:duration-0',
+  // Ensure we animate from the correct origin based on the side the popover is on
+  'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left'
+);
+
 export const popup = {
-  base: cn(
-    // Reset default popover styles
-    'm-0 border-0 text-inherit overflow-visible',
-    // Animation
-    'transition-[transform,scale,opacity,filter] duration-200',
-    'data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm',
-    'data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm',
-    'data-instant:duration-0',
-    // Ensure we animate from the correct origin based on the side the popover is on
-    'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left'
-  ),
   tooltip: cn(
+    base,
     'px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-3xl backdrop-saturate-150 backdrop-brightness-90 text-[0.75rem] whitespace-nowrap',
     '[--media-tooltip-side-offset:0.5rem]'
   ),
-  volume: 'py-2.5 px-1 rounded-full',
+  volume: cn(base, 'py-2.5 px-1 rounded-full'),
 };
diff --git a/packages/skins/src/minimal/tailwind/components/tooltip-state.ts b/packages/skins/src/minimal/tailwind/components/tooltip-state.ts
index 463d2513..a0399f4e 100644
--- a/packages/skins/src/minimal/tailwind/components/tooltip-state.ts
+++ b/packages/skins/src/minimal/tailwind/components/tooltip-state.ts
@@ -6,14 +6,14 @@ export const tooltipState = {
     pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block',
   },
   fullscreen: {
-    wrapper: 'contents group/fs-tip',
-    enter: 'hidden group-[:not(:has([data-fullscreen]))]/fs-tip:block',
-    exit: 'hidden group-has-data-fullscreen/fs-tip:block',
+    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/cc-tip',
-    enable: 'hidden group-[:not(:has([data-active]))]/cc-tip:block',
-    disable: 'hidden group-has-data-active/cc-tip:block',
+    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',
diff --git a/packages/skins/src/shared/audio-icon-state.css b/packages/skins/src/shared/audio/icon-state.css
similarity index 100%
rename from packages/skins/src/shared/audio-icon-state.css
rename to packages/skins/src/shared/audio/icon-state.css
diff --git a/packages/skins/src/shared/audio/tooltip-state.css b/packages/skins/src/shared/audio/tooltip-state.css
new file mode 100644
index 00000000..1cf52308
--- /dev/null
+++ b/packages/skins/src/shared/audio/tooltip-state.css
@@ -0,0 +1,25 @@
+/* ==========================================================================
+   Tooltip Label State Visibility for Audio Skins
+
+   Data-attribute-driven visibility rules for multi-state tooltip labels.
+   Uses adjacent sibling selectors to match button state → tooltip content.
+   ========================================================================== */
+
+/* --- All multi-state labels hidden by default --- */
+
+.media-tooltip-label {
+  display: none;
+}
+
+/* --- Active label per state --- */
+
+/* Play: ended → replay */
+.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,
+/* Play: paused (not ended) → play */
+  .media-button--play:not([data-ended])[data-paused] + .media-tooltip
+  .media-tooltip-label--play,
+/* Play: playing (not paused, not ended) → pause */
+  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip
+  .media-tooltip-label--pause {
+  display: block;
+}
diff --git a/packages/skins/src/shared/video-icon-state.css b/packages/skins/src/shared/video/icon-state.css
similarity index 100%
rename from packages/skins/src/shared/video-icon-state.css
rename to packages/skins/src/shared/video/icon-state.css
diff --git a/packages/skins/src/shared/tooltip-state.css b/packages/skins/src/shared/video/tooltip-state.css
similarity index 63%
rename from packages/skins/src/shared/tooltip-state.css
rename to packages/skins/src/shared/video/tooltip-state.css
index 1152d415..91c7720e 100644
--- a/packages/skins/src/shared/tooltip-state.css
+++ b/packages/skins/src/shared/video/tooltip-state.css
@@ -1,5 +1,5 @@
 /* ==========================================================================
-   Tooltip Label State Visibility
+   Tooltip Label State Visibility for Video Skins
 
    Data-attribute-driven visibility rules for multi-state tooltip labels.
    Uses adjacent sibling selectors to match button state → tooltip content.
@@ -14,30 +14,30 @@
 /* --- Active label per state --- */
 
 /* Play: ended → replay */
-.media-button--play[data-ended] + media-tooltip .media-tooltip-label--replay,
+.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,
 /* Play: paused (not ended) → play */
-  .media-button--play:not([data-ended])[data-paused] + media-tooltip
+  .media-button--play:not([data-ended])[data-paused] + .media-tooltip
   .media-tooltip-label--play,
 /* Play: playing (not paused, not ended) → pause */
-  .media-button--play:not([data-paused]):not([data-ended]) + media-tooltip
+  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip
   .media-tooltip-label--pause,
 /* Fullscreen: not fullscreen → enter */
-  .media-button--fullscreen:not([data-fullscreen]) + media-tooltip
+  .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip
   .media-tooltip-label--enter-fullscreen,
 /* Fullscreen: fullscreen → exit */
-  .media-button--fullscreen[data-fullscreen] + media-tooltip
+  .media-button--fullscreen[data-fullscreen] + .media-tooltip
   .media-tooltip-label--exit-fullscreen,
 /* Captions: not active → enable */
-  .media-button--captions:not([data-active]) + media-tooltip
+  .media-button--captions:not([data-active]) + .media-tooltip
   .media-tooltip-label--enable-captions,
 /* Captions: active → disable */
-  .media-button--captions[data-active] + media-tooltip
+  .media-button--captions[data-active] + .media-tooltip
   .media-tooltip-label--disable-captions,
 /* PiP: not in pip → enter */
-  media-pip-button:not([data-pip]) + media-tooltip
+  .media-button--pip:not([data-pip]) + .media-tooltip
   .media-tooltip-label--enter-pip,
 /* PiP: in pip → exit */
-  media-pip-button[data-pip] + media-tooltip
+  .media-button--pip[data-pip] + .media-tooltip
   .media-tooltip-label--exit-pip {
   display: block;
 }