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

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

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

@@ -13,7 +13,7 @@ import {
 import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
 import { ContextConsumer } from '@videojs/element/context';
 import { SnapshotController } from '@videojs/store/html';
-import { applyStyles, supportsAnchorPositioning } from '@videojs/utils/dom';
+import { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';
 
 import { MediaElement } from '../media-element';
 import { tooltipGroupContext } from './context';
@@ -136,6 +136,14 @@ export class TooltipElement extends MediaElement {
     applyElementProps(this, this.#core.getPopupAttrs(state));
     applyStateDataAttrs(this, state, TooltipDataAttrs);
 
+    // Show/hide via Popover API AFTER data attributes are applied so
+    // `data-starting-style` is present before the first visible frame.
+    if (state.open) {
+      tryShowPopover(this);
+    } else {
+      tryHidePopover(this);
+    }
+
     // Apply trigger ARIA and anchor-name to the discovered trigger.
     if (this.#currentTrigger) {
       applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));