New Tooltips implementation

package.json

@@ -60,5 +60,8 @@
         ]
       }
     }
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.10"
   }
 }

public/index.html

@@ -38,6 +38,11 @@ <h2 id="search">Search</h2>
       <p>Hit <code>/</code> to trigger the search modal, or click on the input from the flyout.</p>
       <readthedocs-search></readthedocs-search>
 
+      <h2>Tooltips</h2>
+      <div role="main">
+        <a href="#" class="internal">Testing tooltips</a>
+      </div>
+
       <h2 id="notification">Notification</h2>
       <readthedocs-notification class="raised toast"></readthedocs-notification>
       <readthedocs-notification class="inverted"></readthedocs-notification>

src/index.js

@@ -6,6 +6,7 @@ import * as docdiff from "./docdiff";
 import * as flyout from "./flyout";
 import * as ethicalads from "./ethicalads";
 import * as hotkeys from "./hotkeys";
+import { initializeTooltips } from "./tooltips";
 import {
   domReady,
   isReadTheDocsEmbedPresent,
@@ -53,6 +54,8 @@ export function setup() {
           console.log("Development mode.");
         }
 
+        initializeTooltips(config);
+
         for (const addon of addons) {
           if (addon.isEnabled(config)) {
             promises.push(

src/tooltips.css

@@ -0,0 +1,22 @@
+.tooltip {
+  display: none;
+  max-width: 650px;
+  pointer-events: auto;
+  z-index: 9999999;
+  height: 600px;
+  max-height: 600px;
+  position: absolute;
+  top: 0;
+  border: none;
+  border-radius: 5px;
+  background: #fff;
+  box-shadow: 0 0 10px 6px rgba(0,0,0,.1);
+}
+
+.tooltip .tooltip-content {
+  box-sizing: border-box;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: auto;
+  padding: 18px;
+}

src/tooltips.js

@@ -1,70 +1,93 @@
-import tippy from "tippy.js";
-import styles from "tippy.js/dist/tippy.css";
-import lightTheme from "tippy.js/themes/light.css";
+import styles from "./tooltips.css";
+
 import { domReady, CLIENT_VERSION } from "./utils";
+import { computePosition, flip, shift, offset } from "@floating-ui/dom";
 
 export function initializeTooltips(config) {
-  // Inject our styles for the flyout
-  document.adoptedStyleSheets.push(styles);
-  document.adoptedStyleSheets.push(lightTheme);
+
 
   domReady.then(() => {
+    // Inject our styles for the tooltips
+    document.adoptedStyleSheets.push(styles);
     // TODO: decide what's the correct selector.
     // Our Sphinx extension is adding a class depending on the configuration.
     // However, we won't have this for other doctools or when the extension is not installed.
     const elements = document.querySelectorAll("[role=main] a.internal"); // .each(function () { this.removeAttr('title'); });
-    tippy(elements, {
-      content: "Loading...",
-      allowHTML: true,
-      arrow: true,
-      hideOnClick: false,
-      interactive: true,
-      theme: "light",
-      placement: "auto",
-      maxWidth: 550,
-      // TODO: make the content of the tooltip scrollable
-      onShow(instance) {
-        const href = instance.reference.href;
+    elements.forEach(el => el.addEventListener("mouseenter", showTooltip));
+    elements.forEach(el => el.addEventListener("mouseleave", hideTooltip));
+
+  });
+}
+
+function getRelatedTooltip(anchorElement) {
+  const existingTooltip = anchorElement.parentElement.querySelector(`div[data-tooltip-href="${anchorElement.href}"]`);
+  if (existingTooltip) {
+    return existingTooltip;
+  }
+  else {
+    const newTooltip = document.createElement("div");
+    newTooltip.insertAdjacentHTML("afterbegin", '<div class="tooltip-content">Loading...</div>');
+    newTooltip.setAttribute("data-tooltip-href", anchorElement.href);
+    newTooltip.classList.add("tooltip");
+    anchorElement.insertAdjacentElement("afterend", newTooltip);
+    return newTooltip;
+  }
+}
+
+function showTooltip(el) {
+  const anchorElement = el.target;
+
+  const newTooltip = getRelatedTooltip(anchorElement);
 
-        // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
-        if (instance.reference.getAttribute("loaded") !== "true") {
-          const hrefAttribute =
-            "http://docs.devthedocs.org/en/stable/tutorial/index.html#modifying-versions";
-          // "http://docs.devthedocs.org/en/stable/tutorial/index.html#upgrading-the-python-version";
-          // "http://docs.devthedocs.org/en/stable/tutorial/index.html";
-          const url = getEmbedURL(hrefAttribute);
+  if (newTooltip !== undefined) {
+    const href = anchorElement.href;
 
-          fetch(url, {
-            method: "GET",
-            headers: {
-              "X-RTD-Hosting-Integrations-Version": CLIENT_VERSION,
-            },
-          })
-            .then((response) => {
-              if (!response.ok) {
-                throw new Error("Error hitting Read the Docs embed API");
-              }
-              return response.json();
-            })
-            .then((data) => {
-              // call the 'content' method to update the content of our tooltip with the returned data.
-              // note: this content update will trigger an update animation (see the updateAnimation option)
-              // TODO: decide whether or not to truncate the content
-              // Do we want to have "modals" as well? are those useful?
-              // const content = truncateContent(data["content"]);
-              const content = data["content"];
-              instance.setContent(content);
+    // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
+      const hrefAttribute =
+        "http://docs.devthedocs.org/en/stable/tutorial/index.html#modifying-versions";
+      // "http://docs.devthedocs.org/en/stable/tutorial/index.html#upgrading-the-python-version";
+      // "http://docs.devthedocs.org/en/stable/tutorial/index.html";
+      const url = getEmbedURL(hrefAttribute);
 
-              // to remember that the data has been loaded
-              instance.reference.setAttribute("loaded", "true");
-            })
-            .catch((error) => {
-              console.log(error.message);
+      fetch(url, {
+        method: "GET",
+        headers: {
+          "X-RTD-Hosting-Integrations-Version": CLIENT_VERSION,
+        },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Error hitting Read the Docs embed API");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          // call the 'content' method to update the content of our tooltip with the returned data.
+          // note: this content update will trigger an update animation (see the updateAnimation option)
+          // TODO: decide whether or not to truncate the content
+          // Do we want to have "modals" as well? are those useful?
+          // const content = truncateContent(data["content"]);
+          const content = data["content"];
+          newTooltip.firstChild.innerHTML = content;
+          newTooltip.style.display = 'block';
+          computePosition(anchorElement, newTooltip, {placement: "right", middleware: [offset(10), flip(), shift(20)]}).then(({x, y}) => {
+            Object.assign(newTooltip.style, {
+              left: `${x}px`,
+              top: `${y}px`,
             });
-        }
-      },
-    });
-  });
+          });
+          newTooltip.classList.remove("hide");
+        })
+        .catch((error) => {
+          console.log(error.message);
+        });
+  }
+}
+
+function hideTooltip(el) {
+  const anchorElement = el.fromElement;
+  const newTooltip = getRelatedTooltip(anchorElement);
+  newTooltip.style.display = '';
 }
 
 function getEmbedURL(url) {
@@ -76,6 +99,8 @@ function getEmbedURL(url) {
     url: url,
   };
 
-  const api_url = "/_/api/v3/embed/?" + new URLSearchParams(params).toString();
+  // const api_url = "https://docs.readthedocs.io/_/api/v3/embed/?doctool=sphinx&doctoolversion=7.3.7&url=https%3A%2F%2Fdocs.readthedocs.io%2Fen%2Fstable%2Fversions.html%23how-we-envision-versions-working";
+  // const api_url = "https://sphinx-hoverxref.readthedocs.io/_/api/v3/embed/?doctool=sphinx&doctoolversion=7.4.7&url=https%3A%2F%2Fsphinx-hoverxref.readthedocs.io%2Fen%2Flatest%2Fhoverxref.html%23hoverxref";
+  const api_url = "https://sphinx-hoverxref.readthedocs.io/_/api/v3/embed/?doctool=sphinx&doctoolversion=7.4.7&url=https%3A%2F%2Fwww.sphinx-doc.org%2Fen%2Fmaster%2Findex.html";
   return api_url;
 }