fix: tooltip overflow causing scrollbar (#1018)

fix #1017

src/js/media-tooltip.ts

@@ -2,6 +2,7 @@ import {
   closestComposedNode,
   getMediaController,
   getStringAttr,
+  isElementVisible,
   setStringAttr,
 } from './utils/element-utils.js';
 import { globalThis, document } from './utils/server-safe-globals.js';
@@ -190,6 +191,10 @@ class MediaTooltip extends globalThis.HTMLElement {
   // such that it doesn't spill out of the left or right sides. Only applies
   // to 'top' and 'bottom' placed tooltips.
   updateXOffset = () => {
+    // If the tooltip is hidden don't offset the tooltip because it could be
+    // positioned offscreen causing scrollbars to appear.
+    if (!isElementVisible(this, { checkOpacity: false, checkVisibilityCSS: false })) return;
+
     const placement = this.placement;
 
     // we don't offset against tooltips coming out of left and right sides

src/js/utils/element-utils.ts

@@ -121,25 +121,25 @@ export function getDocumentOrShadowRoot(
  */
 export function isElementVisible(
   element: HTMLElement,
-  depth: number = 3
+  { depth = 3, checkOpacity = true, checkVisibilityCSS = true } = {}
 ): boolean {
   // Supported by Chrome and Firefox https://caniuse.com/mdn-api_element_checkvisibility
   // https://drafts.csswg.org/cssom-view-1/#dom-element-checkvisibility
   // @ts-ignore
   if (element.checkVisibility) {
     // @ts-ignore
     return element.checkVisibility({
-      checkOpacity: true,
-      checkVisibilityCSS: true,
+      checkOpacity,
+      checkVisibilityCSS,
     });
   }
   // Check if the element or its ancestors are hidden.
   let el = element;
   while (el && depth > 0) {
     const style = getComputedStyle(el);
     if (
-      style.opacity === '0' ||
-      style.visibility === 'hidden' ||
+      (checkOpacity && style.opacity === '0') ||
+      (checkVisibilityCSS && style.visibility === 'hidden') ||
       style.display === 'none'
     ) {
       return false;