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

2 files changed, 16 insertions, 0 deletions

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');