feat: add tooltip core (#212)

packages/utils/src/dom/attributes.ts

@@ -1,3 +1,5 @@
+import { toKebabCase } from '@videojs/utils';
+
 /**
  * Converts a `NamedNodeMap` to a plain object.
  */
@@ -22,9 +24,9 @@ export function setAttributes(element: HTMLElement, attributes: Record<string, a
     if (key === 'style' && typeof value === 'object') {
       for (const [styleKey, styleValue] of Object.entries(value)) {
         if (typeof styleValue === 'string') {
-          element.style.setProperty(styleKey, styleValue);
+          element.style.setProperty(toKebabCase(styleKey), styleValue);
         } else if (styleValue == null) {
-          element.style.removeProperty(styleKey);
+          element.style.removeProperty(toKebabCase(styleKey));
         }
       }
     } else {

packages/utils/src/dom/element.ts

@@ -26,7 +26,7 @@ export function getDocumentOrShadowRoot(node: Node): Document | ShadowRoot | nul
   return null;
 }
 
-export function getDocument(node: Element | null): Document {
+export function getDocument(node?: Element | null): Document {
   return node?.ownerDocument ?? document;
 }
 
@@ -111,7 +111,7 @@ export function getNodeChildren(
   return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
 }
 
-export function getBoundingClientRectWithoutTransform(element: HTMLElement): DOMRect {
+export function getUntransformedBoundingRect(element: HTMLElement): DOMRect {
   let el = element;
   let left = 0;
   let top = 0;
@@ -134,6 +134,38 @@ export function getBoundingClientRectWithoutTransform(element: HTMLElement): DOM
   } as DOMRect;
 }
 
+export function addTranslateToBoundingRect(rect: DOMRect, element: HTMLElement): DOMRect {
+  // Get translate from transform
+  const style = getWindow(element).getComputedStyle(element);
+  const translate = style.translate;
+  if (translate && translate !== 'none') {
+    const values = translate.split(' ');
+
+    // Parse translateX (can be px, %, etc)
+    const translateX = parseTranslateValue(values[0] ?? '0', element.offsetWidth);
+    const translateY = parseTranslateValue(values[1] ?? '0', element.offsetHeight);
+
+    return {
+      ...rect,
+      left: rect.left + translateX,
+      top: rect.top + translateY,
+    };
+  }
+
+  return rect;
+}
+
+function parseTranslateValue(value: string, referenceSize: number): number {
+  if (value.endsWith('%')) {
+    return (Number.parseFloat(value) / 100) * referenceSize;
+  }
+  if (value.endsWith('px')) {
+    return Number.parseFloat(value);
+  }
+  // Handle other units like em, rem, etc if needed
+  return Number.parseFloat(value) || 0;
+}
+
 export function getInBoundsAdjustments(
   popupRect: DOMRect,
   containerRect: DOMRect,