From 70ccb9993fd0d7b63506ce6052aa022341fab5d3 Mon Sep 17 00:00:00 2001
From: Benjamin <f.benjamin.larsson@gmail.com>
Date: Thu, 1 May 2025 23:51:37 +0200
Subject: [PATCH] Ensure mobile <abbr> tooltips don't appear off-screen

---
 _static/css/custom.css | 42 ++++++++++++++++++------------------------
 _static/js/custom.js   | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/_static/css/custom.css b/_static/css/custom.css
index 5a57b8b4a59..f9997dfaf2c 100644
--- a/_static/css/custom.css
+++ b/_static/css/custom.css
@@ -703,6 +703,8 @@ footer {
 
 .wy-nav-content-wrap {
     background-color: var(--content-wrap-background-color);
+    position: relative;
+    overflow-x: auto;
 }
 
 .wy-nav-content {
@@ -1814,30 +1816,22 @@ p + .classref-constant {
     padding: 0.5em 0.75em;
 }
 
-/* Allow :abbr: tags' content to be displayed on mobile platforms by tapping the word */
-@media (hover: none), (hover: on-demand), (-moz-touch-enabled: 1), (pointer:coarse) {
-    /* Do not enable on desktop platforms to avoid doubling the tooltip */
-    abbr[title] {
-        position: relative;
-    }
-
-    abbr[title]:hover::after,
-    abbr[title]:focus::after {
-        content: attr(title);
-
-        position: absolute;
-        left: 0;
-        bottom: -32px;
-        width: auto;
-        white-space: nowrap;
-
-        background-color: #1e1e1e;
-        color: #fff;
-        border-radius: 3px;
-        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
-        font-size: 14px;
-        padding: 3px 5px;
-    }
+.abbr-tooltip {
+    position: absolute;
+    transform: translate(var(--offset-x), var(--offset-y));
+    width: max-content;
+    max-width: 100vw;
+    padding: 0 1rem;
+    z-index: 1;
+}
+.abbr-tooltip > div {
+    background-color: #1e1e1e;
+    color: #fff;
+    border-radius: 3px;
+    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
+    font-size: 14px;
+    padding: 3px 5px;
+    white-space: normal;
 }
 
 /* Giscus */
diff --git a/_static/js/custom.js b/_static/js/custom.js
index d028dd0f329..082834517d5 100644
--- a/_static/js/custom.js
+++ b/_static/js/custom.js
@@ -477,6 +477,39 @@ $(document).ready(() => {
       }
   });
 
+  /** @type HTMLElement */
+  let currentlyShownTooltip = null;
+  const touchDeviceQuery = window.matchMedia('(hover: none), (hover: on-demand), (-moz-touch-enabled: 1), (pointer:coarse)');
+  
+  /* Allow :abbr: tags' content to be displayed on mobile platforms by tapping the word */
+  document.addEventListener('click', (event) => {
+    if (currentlyShownTooltip) {
+      currentlyShownTooltip.remove();
+      currentlyShownTooltip = null;
+    }
+
+    /* Do not enable on desktop platforms to avoid doubling the tooltip */
+    if (!touchDeviceQuery.matches) {
+      return;
+    }
+
+    /** @type HTMLElement */
+    const abbr = event.target;
+
+    if (abbr.matches('abbr[title]')) {
+      currentlyShownTooltip = document.createElement('div');
+      currentlyShownTooltip.classList.add('abbr-tooltip')
+      currentlyShownTooltip.appendChild(document.createElement('div')).innerText = abbr.getAttribute('title');
+      abbr.appendChild(currentlyShownTooltip);
+
+      const tooltipRect = currentlyShownTooltip.getBoundingClientRect();
+      const distanceOffScreenX = Math.max(0, tooltipRect.right - window.innerWidth);
+      const distanceOffScreenY = Math.max(0, tooltipRect.bottom - window.innerHeight);
+      currentlyShownTooltip.style.setProperty('--offset-x', -distanceOffScreenX + 'px');
+      currentlyShownTooltip.style.setProperty('--offset-y', -distanceOffScreenY + 'px');
+    }
+  });
+
   // Unfold the first (general information) section on the home page.
   if (!hasCurrent && menuHeaders.length > 0) {
     menuHeaders[0].classList.add('active');