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

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

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