feat(skin): port tooltip styling from tech preview

[sampotts]

Summary

• Add shared tooltip state CSS and Tailwind tooltip-state modules for default and minimal skins
• Update popup components to support tooltip positioning across all skin variants
• Wrap interactive controls (play, mute, fullscreen, PiP, etc.) with tooltips in all HTML and React skin presets (audio/video, default/minimal, CSS/Tailwind)

Closes #617

Test plan

• Verify tooltips appear on hover for all interactive controls in video skins
• Verify tooltips appear on hover for all interactive controls in audio skins
• Verify tooltips work in both CSS and Tailwind skin variants
• Verify tooltips work in both React and HTML presets
• Verify minimal and default skin variants both show tooltips correctly
• Verify tooltip positioning does not overflow the player bounds

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Mar 10, 2026 2:44am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	b641af7
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69af859e94c30700098a4ea3
😎 Deploy Preview	https://deploy-preview-800--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html

Path	Base	PR	Diff	%
/video/minimal-skin	21.24 kB	22.20 kB	+983 B	+4.5%	🔺
/video/minimal-skin.tailwind	20.36 kB	21.45 kB	+1.08 kB	+5.3%	🔺
/video/skin	21.38 kB	22.37 kB	+1013 B	+4.6%	🔺
/video/skin.tailwind	20.42 kB	21.45 kB	+1.03 kB	+5.1%	🔺
/audio/minimal-skin	19.77 kB	20.69 kB	+940 B	+4.6%	🔺
/audio/minimal-skin.tailwind	18.80 kB	19.67 kB	+892 B	+4.6%	🔺
/audio/skin	19.79 kB	20.71 kB	+949 B	+4.7%	🔺
/audio/skin.tailwind	19.04 kB	19.87 kB	+845 B	+4.3%	🔺
/video (default)	21.95 kB	22.94 kB	+1008 B	+4.5%	🔺
/video (default + hls)	152.25 kB	153.37 kB	+1.12 kB	+0.7%	🔺
/video (minimal)	21.83 kB	22.75 kB	+942 B	+4.2%	🔺
/video (minimal + hls)	152.25 kB	153.26 kB	+1.01 kB	+0.7%	🔺
/audio (default)	20.33 kB	21.27 kB	+963 B	+4.6%	🔺
/audio (minimal)	20.32 kB	21.25 kB	+956 B	+4.6%	🔺

Presets (7)

Entry	Size
/video (default)	22.94 kB
/video (default + hls)	153.37 kB
/video (minimal)	22.75 kB
/video (minimal + hls)	153.26 kB
/audio (default)	21.27 kB
/audio (minimal)	21.25 kB
/background	6.35 kB

Media (4)

Entry	Size
/media/background-video	652 B
/media/container	1.86 kB
/media/hls-video	131.32 kB
/media/simple-hls-video	11.33 kB

Players (3)

Entry	Size
/video/player	6.20 kB
/audio/player	6.19 kB
/background/player	6.19 kB

Skins (14)

Entry	Type	Size
/video/minimal-skin.css	css	2.75 kB
/video/skin.css	css	2.79 kB
/video/minimal-skin	js	22.20 kB
/video/minimal-skin.tailwind	js	21.45 kB
/video/skin	js	22.37 kB
/video/skin.tailwind	js	21.45 kB
/audio/minimal-skin.css	css	2.24 kB
/audio/skin.css	css	2.26 kB
/audio/minimal-skin	js	20.69 kB
/audio/minimal-skin.tailwind	js	19.67 kB
/audio/skin	js	20.71 kB
/audio/skin.tailwind	js	19.87 kB
/background/skin.css	css	124 B
/background/skin	js	1009 B

UI Components (21)

Entry	Size
/ui/alert-dialog	2.05 kB
/ui/alert-dialog-close	1.27 kB
/ui/alert-dialog-description	1.17 kB
/ui/alert-dialog-title	1.20 kB
/ui/buffering-indicator	1.74 kB
/ui/captions-button	1.74 kB
/ui/controls	1.83 kB
/ui/fullscreen-button	1.77 kB
/ui/mute-button	1.77 kB
/ui/pip-button	1.78 kB
/ui/play-button	1.77 kB
/ui/playback-rate-button	1.78 kB
/ui/popover	3.04 kB
/ui/poster	1.69 kB
/ui/seek-button	1.76 kB
/ui/slider	2.23 kB
/ui/thumbnail	2.07 kB
/ui/time	1.84 kB
/ui/time-slider	3.45 kB
/ui/tooltip	2.44 kB
/ui/volume-slider	2.41 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

Path	Base	PR	Diff	%
/video/minimal-skin	15.69 kB	16.58 kB	+903 B	+5.6%	🔺
/video/minimal-skin.tailwind	18.19 kB	19.13 kB	+968 B	+5.2%	🔺
/video/skin	15.71 kB	16.57 kB	+883 B	+5.5%	🔺
/video/skin.tailwind	18.26 kB	19.23 kB	+995 B	+5.3%	🔺
/audio/minimal-skin	13.51 kB	14.29 kB	+803 B	+5.8%	🔺
/audio/minimal-skin.tailwind	15.24 kB	16.09 kB	+874 B	+5.6%	🔺
/audio/skin	13.42 kB	14.24 kB	+838 B	+6.1%	🔺
/audio/skin.tailwind	15.45 kB	16.27 kB	+839 B	+5.3%	🔺
/video (default)	15.79 kB	16.66 kB	+884 B	+5.5%	🔺
/video (default + hls)	146.42 kB	147.46 kB	+1.05 kB	+0.7%	🔺
/video (minimal)	15.83 kB	16.66 kB	+856 B	+5.3%	🔺
/video (minimal + hls)	146.62 kB	147.48 kB	+876 B	+0.6%	🔺
/audio (default)	13.53 kB	14.33 kB	+820 B	+5.9%	🔺
/audio (minimal)	13.55 kB	14.40 kB	+871 B	+6.3%	🔺

Presets (7)

Entry	Size
/video (default)	16.66 kB
/video (default + hls)	147.46 kB
/video (minimal)	16.66 kB
/video (minimal + hls)	147.48 kB
/audio (default)	14.33 kB
/audio (minimal)	14.40 kB
/background	3.12 kB

Media (3)

Entry	Size
/media/background-video	539 B
/media/hls-video	131.60 kB
/media/simple-hls-video	11.74 kB

Skins (14)

Entry	Type	Size
/video/minimal-skin.css	css	2.75 kB
/video/skin.css	css	2.79 kB
/video/minimal-skin	js	16.58 kB
/video/minimal-skin.tailwind	js	19.13 kB
/video/skin	js	16.57 kB
/video/skin.tailwind	js	19.23 kB
/audio/minimal-skin.css	css	2.24 kB
/audio/skin.css	css	2.26 kB
/audio/minimal-skin	js	14.29 kB
/audio/minimal-skin.tailwind	js	16.09 kB
/audio/skin	js	14.24 kB
/audio/skin.tailwind	js	16.27 kB
/background/skin.css	css	90 B
/background/skin	js	272 B

UI Components (17)

Entry	Size
/ui/alert-dialog	2.69 kB
/ui/buffering-indicator	2.21 kB
/ui/captions-button	2.25 kB
/ui/controls	2.22 kB
/ui/fullscreen-button	2.25 kB
/ui/mute-button	2.23 kB
/ui/pip-button	2.24 kB
/ui/play-button	2.25 kB
/ui/playback-rate-button	2.25 kB
/ui/popover	3.11 kB
/ui/poster	2.05 kB
/ui/seek-button	2.24 kB
/ui/slider	3.61 kB
/ui/time	2.35 kB
/ui/time-slider	3.22 kB
/ui/tooltip	3.23 kB
/ui/volume-slider	3.10 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core

(no changes)

Entries (5)

Entry	Size
.	4.78 kB
/dom	7.99 kB
/dom/media/custom-media-element	1.77 kB
/dom/media/hls	131.18 kB
/dom/media/simple-hls	11.28 kB

🏷️ @videojs/element

(no changes)

Entries (2)

Entry	Size
.	999 B
/context	936 B

📦 @videojs/store

(no changes)

Entries (3)

Entry	Size
.	1.32 kB
/html	700 B
/react	360 B

🔧 @videojs/utils

(no changes)

Entries (10)

Entry	Size
/array	104 B
/dom	1003 B
/events	227 B
/function	261 B
/object	119 B
/predicate	265 B
/string	148 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf

(no changes)

Entries (3)

Entry	Size
.	40 B
/dom	9.48 kB
/playback-engine	9.37 kB

---

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.

[github-actions]

CI Failure Diagnosis

• Run: https://github.com/videojs/v10/actions/runs/22884652772
• Commit: b641af7ff5103dd6a4d192ea8344ac1fc3241a39

File	Type	What failed
packages/core/src/core/ui/types.ts	lint	noBannedTypes: {} used as default type parameter on lines 6 and 13.
packages/spf/src/dom/features/end-of-stream.ts:208	lint	noBannedTypes: {} used as type annotation for _context parameter.
packages/spf/src/core/state/create-state.ts:154	lint	suppressions/unused: biome-ignore comment has no effect — rule no longer triggers.