On Hover Footnote Preview (#2522)

Author: shravanngoswamii

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 * Added option `treat_markdown_warnings_as_error` which throws an error when encountering a markdown/interpolation warning ([#2792], [#2751])
+* Footnotes can now be previewed by hovering over the link. ([#2080])
 
 ### Changed
 
@@ -1997,6 +1998,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2071]: https://github.com/JuliaDocs/Documenter.jl/issues/2071
 [#2076]: https://github.com/JuliaDocs/Documenter.jl/issues/2076
 [#2078]: https://github.com/JuliaDocs/Documenter.jl/issues/2078
+[#2080]: https://github.com/JuliaDocs/Documenter.jl/issues/2080
 [#2081]: https://github.com/JuliaDocs/Documenter.jl/issues/2081
 [#2085]: https://github.com/JuliaDocs/Documenter.jl/issues/2085
 [#2100]: https://github.com/JuliaDocs/Documenter.jl/issues/2100

assets/html/js/footnote.js

@@ -0,0 +1,49 @@
+// libraries: jquery
+// arguments: $
+$(document).ready(function () {
+  $(".footnote-ref").hover(
+    function () {
+      var id = $(this).attr("href");
+      var footnoteContent = $(id).clone().find("a").remove().end().html();
+
+      var $preview = $(this).next(".footnote-preview");
+
+      $preview.html(footnoteContent).css({
+        display: "block",
+        left: "50%",
+        transform: "translateX(-50%)",
+      });
+
+      repositionPreview($preview, $(this));
+    },
+    function () {
+      var $preview = $(this).next(".footnote-preview");
+      $preview.css({
+        display: "none",
+        left: "",
+        transform: "",
+        "--arrow-left": "",
+      });
+    },
+  );
+
+  function repositionPreview($preview, $ref) {
+    var previewRect = $preview[0].getBoundingClientRect();
+    var refRect = $ref[0].getBoundingClientRect();
+    var viewportWidth = $(window).width();
+
+    if (previewRect.right > viewportWidth) {
+      var excessRight = previewRect.right - viewportWidth;
+      $preview.css("left", `calc(50% - ${excessRight + 10}px)`);
+    } else if (previewRect.left < 0) {
+      var excessLeft = 0 - previewRect.left;
+      $preview.css("left", `calc(50% + ${excessLeft + 10}px)`);
+    }
+
+    var newPreviewRect = $preview[0].getBoundingClientRect();
+
+    var arrowLeft = refRect.left + refRect.width / 2 - newPreviewRect.left;
+
+    $preview.css("--arrow-left", arrowLeft + "px");
+  }
+});

assets/html/scss/documenter/components/_all.scss

@@ -2,3 +2,4 @@
 @import "docstring";
 @import "example";
 @import "warner";
+@import "footnote";

assets/html/scss/documenter/components/_footnote.scss

@@ -0,0 +1,33 @@
+.footnote-reference {
+    position: relative;
+    display: inline-block;
+}
+
+.footnote-preview {
+    display: none;
+    position: absolute;
+    z-index: 1000;
+    max-width: 300px;
+    width: max-content;
+    background-color: $body-background-color;
+    border: 1px solid $link-hover;
+    padding: 10px;
+    border-radius: 5px;
+    top: calc(100% + 10px);
+    left: 50%;
+    transform: translateX(-50%);
+    box-sizing: border-box;
+    /* Default arrow position */
+    --arrow-left: 50%;
+}
+
+.footnote-preview::before {
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: var(--arrow-left);
+    transform: translateX(-50%);
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid $link-hover;
+}