refactor(time-tooltip): use css to center the component

videojs · Dec 15, 2023 · 37f6acb · 37f6acb
1 parent d2dc5b9
commit 37f6acb
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss
@@ -123,7 +123,7 @@
   // with the right edge of their parent element. However, in order to have them
   // centered, they must be pulled further to the right via positioning (e.g.
   // `right: -10px;`. This part is left to JavaScript.
-  float: right;
+  // float: right;
   font-family: $text-font-family;
 
   // The font-size should translate to a consistent 10px for time tooltips in
@@ -134,6 +134,8 @@
   pointer-events: none;
   position: absolute;
   top: -3.4em;
+  right: 0;
+  transform: translateX(50%);
   visibility: hidden;
   z-index: 1;
 }

diff --git a/src/js/control-bar/progress-control/time-tooltip.js b/src/js/control-bar/progress-control/time-tooltip.js
@@ -102,7 +102,6 @@ class TimeTooltip extends Component {
     // progress time tooltip from jittering
     pullTooltipBy = Math.round(pullTooltipBy);
 
-    this.el_.style.right = `-${pullTooltipBy}px`;
     this.write(content);
   }