content, css, client: hoverable-tooltip: isolate z-index bullshit

3 files changed, 18 insertions, 0 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index f21aa00d..9348acd8 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -329,6 +329,8 @@ export default {
 
           html.tag('div', {id: 'cover-art-column'},
             {[html.onlyIfContent]: true},
+            {class: 'isolate-tooltip-z-indexing'},
+
             slots.coverColumnContent),
 
           subtitleHTML,
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 99c7d90d..51a1f97f 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1096,6 +1096,11 @@ a .normal-content {
   text-decoration: none !important;
 }
 
+.isolate-tooltip-z-indexing > * {
+  position: relative;
+  z-index: -1;
+}
+
 .tooltip {
   position: absolute;
   z-index: 3;
diff --git a/src/static/js/client/hoverable-tooltip.js b/src/static/js/client/hoverable-tooltip.js
index 484f2ab0..395bb51a 100644
--- a/src/static/js/client/hoverable-tooltip.js
+++ b/src/static/js/client/hoverable-tooltip.js
@@ -576,6 +576,17 @@ export function showTooltipFromHoverable(hoverable) {
 
   hoverable.classList.add('has-visible-tooltip');
 
+  const isolator =
+    hoverable.closest('.isolate-tooltip-z-indexing > *');
+
+  if (isolator) {
+    for (const child of isolator.parentElement.children) {
+      cssProp(child, 'z-index', null);
+    }
+
+    cssProp(isolator, 'z-index', '1');
+  }
+
   positionTooltipFromHoverableWithBrains(hoverable);
 
   cssProp(tooltip, 'display', 'block');