fix(html): refresh tooltip text when i18n locale changes

Subscribe tooltips to the i18n context and re-sync trigger labels on
update so open tooltips track locale switches on media-i18n-provider.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: sampotts

packages/html/src/ui/tooltip/tests/tooltip-element.test.ts

@@ -83,4 +83,40 @@ describe('TooltipElement', () => {
 
     expect(tooltip.textContent).toBe('Reproducir');
   });
+
+  it('updates tooltip text when provider locale changes', async () => {
+    registerI18n('es', { play: 'Reproducir' });
+    registerI18n('fr', { play: 'Lire' });
+
+    ensureDefined(TestPlayerProviderElement);
+    ensureDefined(PlayButtonElement);
+    ensureDefined(TooltipElement);
+    ensureDefined(MediaI18nProviderElement);
+
+    const player = document.createElement(TestPlayerProviderElement.tagName) as TestPlayerProviderElement;
+    const provider = new MediaI18nProviderElement();
+    provider.setAttribute('lang', 'es');
+
+    const button = document.createElement(PlayButtonElement.tagName) as PlayButtonElement;
+    button.setAttribute('commandfor', 'tip');
+
+    const tooltip = document.createElement(TooltipElement.tagName) as TooltipElement;
+    tooltip.id = 'tip';
+    tooltip.setAttribute('open', '');
+
+    document.body.append(player);
+    player.append(provider);
+    provider.append(button, tooltip);
+
+    await button.updateComplete;
+    await tooltip.updateComplete;
+    expect(tooltip.textContent).toBe('Reproducir');
+
+    provider.setAttribute('lang', 'fr');
+    await provider.updateComplete;
+    await button.updateComplete;
+    await tooltip.updateComplete;
+
+    expect(tooltip.textContent).toBe('Lire');
+  });
 });

packages/html/src/ui/tooltip/tooltip-element.ts

@@ -30,6 +30,7 @@ import { SnapshotController } from '@videojs/store/html';
 import { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';
 import { isFunction } from '@videojs/utils/predicate';
 
+import { I18nController } from '../../i18n/instance';
 import { containerContext } from '../../player/context';
 import { MediaElement } from '../media-element';
 import { PositionController } from '../position-controller';
@@ -71,6 +72,7 @@ export class TooltipElement extends MediaElement {
   boundary: PositioningBoundary = 'container';
 
   readonly #core = new TooltipCore();
+  readonly #i18n = new I18nController(this);
   readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });
   readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });
   readonly #position = new PositionController(this);
@@ -166,6 +168,10 @@ export class TooltipElement extends MediaElement {
     const triggerEl = this.#position.findTrigger();
     this.#syncTrigger(triggerEl);
 
+    if (this.#currentTrigger && isLabelTrigger(this.#currentTrigger)) {
+      this.#syncContent(this.#currentTrigger);
+    }
+
     // Derive state from core + input.
     const input = this.#tooltip.input.current;
     this.#core.setInput(input);