feat(skin): port tooltip styling from tech preview (#800)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/skins/src/default/css/audio.css

@@ -1,4 +1,5 @@
 @import "../../shared/audio-icon-state.css";
+@import "../../shared/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/surface.css";
@@ -10,7 +11,6 @@
 @import "./components/icons.css";
 @import "./components/slider.css";
 @import "./components/popup.css";
-@import "./components/tooltip.css";
 
 /* ==========================================================================
    Root

packages/skins/src/default/css/components/popup.css

@@ -1,8 +1,12 @@
 /* ==========================================================================
-   Popups & Animations
+   Popups & Tooltips
    ========================================================================== */
 
-.media-default-skin .media-popup-animation {
+.media-default-skin .media-popup {
+  margin: 0;
+  border: 0;
+  color: inherit;
+  overflow: visible;
   transition-property: transform, scale, opacity, filter;
   transition-duration: 200ms;
 
@@ -31,12 +35,18 @@
   }
 }
 
-.media-default-skin .media-popup {
-  margin: 0;
-  border: 0;
-  color: inherit;
+.media-default-skin .media-popup--popover {
   --media-popover-side-offset: 0.5rem;
 }
+
+.media-default-skin .media-popup--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);

packages/skins/src/default/css/components/tooltip.css

@@ -1,13 +0,0 @@
-/* ==========================================================================
-   Tooltips
-   ========================================================================== */
-
-.media-default-skin .media-tooltip {
-  white-space: nowrap;
-}
-.media-default-skin .media-tooltip-popup {
-  padding: 0.25rem 0.625rem;
-  border-radius: calc(infinity * 1px);
-  color: oklch(1 0 0);
-  font-size: 0.75rem;
-}

packages/skins/src/default/css/video.css

@@ -1,4 +1,5 @@
 @import "../../shared/video-icon-state.css";
+@import "../../shared/tooltip-state.css";
 @import "./components/reset.css";
 @import "./components/root.css";
 @import "./components/surface.css";
@@ -12,7 +13,6 @@
 @import "./components/icons.css";
 @import "./components/slider.css";
 @import "./components/popup.css";
-@import "./components/tooltip.css";
 @import "./components/captions.css";
 
 /* ==========================================================================

packages/skins/src/default/tailwind/audio.tailwind.ts

@@ -57,6 +57,19 @@ export const iconState = {
   },
 };
 
+/* ==========================================================================
+   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)
    ========================================================================== */

packages/skins/src/default/tailwind/components/popup.ts

@@ -3,9 +3,7 @@ import { cn } from '@videojs/utils/style';
 export const popup = {
   base: cn(
     // Reset default popover styles
-    'm-0 border-0 text-inherit',
-    // Default offset
-    '[--media-popover-side-offset:0.5rem]',
+    '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',
@@ -14,5 +12,7 @@ export const popup = {
     // 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: '[--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',
 };

packages/skins/src/default/tailwind/components/tooltip-state.ts

@@ -0,0 +1,23 @@
+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/fs-tip',
+    enter: 'hidden group-[:not(:has([data-fullscreen]))]/fs-tip:block',
+    exit: 'hidden group-has-data-fullscreen/fs-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',
+  },
+  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',
+  },
+};

packages/skins/src/default/tailwind/video.tailwind.ts

@@ -142,3 +142,4 @@ 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';