fix(player): include tooltip left/right default theme styles

closes #1059
vidstack · Dec 20, 2023 · 80ad732 · 80ad732
1 parent fcb938f
commit 80ad732
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/vidstack/player/styles/default/tooltips.css b/packages/vidstack/player/styles/default/tooltips.css
@@ -60,6 +60,18 @@
   --exit-transform: translateY(-12px) scale(0.8);
 }
 
+/* Left */
+:where(.vds-tooltip-content[data-placement~='left']) {
+  --enter-transform: translateX(0) scale(1);
+  --exit-transform: translateX(12px) scale(0.8);
+}
+
+/* Right */
+:where(.vds-tooltip-content[data-placement~='right']) {
+  --enter-transform: translateX(0) scale(1);
+  --exit-transform: translateX(-12px) scale(0.8);
+}
+
 @keyframes vds-tooltip-enter {
   from {
     opacity: 0;

diff --git a/packages/vidstack/src/utils/dom.ts b/packages/vidstack/src/utils/dom.ts
@@ -150,17 +150,18 @@ export function autoPlacement(
   setStyle(el, 'visibility', !trigger ? 'hidden' : null);
   if (!trigger) return;
 
-  const negateY = (y: string) => (placement.includes('top') ? `calc(-1 * ${y})` : y);
+  const negateX = (x: string) => (placement.includes('left') ? `calc(-1 * ${x})` : x),
+    negateY = (y: string) => (placement.includes('top') ? `calc(-1 * ${y})` : y);
 
   return autoUpdate(trigger, el, () => {
     computePosition(trigger, el, { placement: floatingPlacement, ...options }).then(({ x, y }) => {
       Object.assign(el.style, {
         top: `calc(${y + 'px'} + ${negateY(
           yOffset ? yOffset + 'px' : `var(--${offsetVarName}-y-offset, 0px)`,
         )})`,
-        left: `calc(${x + 'px'} + ${
-          xOffset ? xOffset + 'px' : `var(--${offsetVarName}-x-offset, 0px)`
-        })`,
+        left: `calc(${x + 'px'} + ${negateX(
+          xOffset ? xOffset + 'px' : `var(--${offsetVarName}-x-offset, 0px)`,
+        )})`,
       });
     });
   });