From 181aec22c7122c5a1bb3f4a653e652d868fe1f48 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Tue, 5 Nov 2024 10:22:47 -0600
Subject: [PATCH] fix: tooltip overflow causing scrollbar (#1018)

fix #1017
---
 src/js/media-tooltip.ts       |  5 +++++
 src/js/utils/element-utils.ts | 10 +++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/js/media-tooltip.ts b/src/js/media-tooltip.ts
index 2d519bf5f..78a382e28 100644
--- a/src/js/media-tooltip.ts
+++ b/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
diff --git a/src/js/utils/element-utils.ts b/src/js/utils/element-utils.ts
index 95701f5e7..0f52a1f2f 100644
--- a/src/js/utils/element-utils.ts
+++ b/src/js/utils/element-utils.ts
@@ -121,7 +121,7 @@ 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
@@ -129,8 +129,8 @@ export function isElementVisible(
   if (element.checkVisibility) {
     // @ts-ignore
     return element.checkVisibility({
-      checkOpacity: true,
-      checkVisibilityCSS: true,
+      checkOpacity,
+      checkVisibilityCSS,
     });
   }
   // Check if the element or its ancestors are hidden.
@@ -138,8 +138,8 @@ export function isElementVisible(
   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;