Add footnote tooltips with Bootstrap integration and styling

Author: MrHinsh

module/assets/css/style.css

@@ -512,3 +512,86 @@ li input[type="checkbox"] + * {
     display: none;
   }
 }
+
+/* ========================================
+   Footnote Tooltips
+   ======================================== */
+
+/* Footnote reference links with enhanced styling */
+a.footnote-tooltip {
+  position: relative;
+  color: #135289;
+  text-decoration: none;
+  font-weight: 600;
+  padding: 0 2px;
+  transition: all 0.2s ease;
+}
+
+a.footnote-tooltip:hover {
+  color: #0d3d63;
+  text-decoration: underline;
+}
+
+/* Custom tooltip styling for footnote content */
+.footnote-tooltip-content {
+  --bs-tooltip-max-width: 400px;
+  --bs-tooltip-bg: #353535;
+  --bs-tooltip-color: #ffffff;
+  --bs-tooltip-opacity: 0.98;
+}
+
+.footnote-tooltip-content .tooltip-inner {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  max-width: 400px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+/* Links within tooltip */
+.footnote-tooltip-content .tooltip-inner a {
+  color: #6fb3f0;
+  text-decoration: underline;
+  word-break: break-all;
+}
+
+.footnote-tooltip-content .tooltip-inner a:hover {
+  color: #a0cdf5;
+}
+
+/* Italic text in tooltips (book/article titles) */
+.footnote-tooltip-content .tooltip-inner em,
+.footnote-tooltip-content .tooltip-inner i {
+  font-style: italic;
+  color: #e0e0e0;
+}
+
+/* Better text wrapping in tooltips */
+.footnote-tooltip-content .tooltip-inner {
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+/* Responsive tooltip sizing */
+@media (max-width: 768px) {
+  .footnote-tooltip-content {
+    --bs-tooltip-max-width: 280px;
+  }
+  
+  .footnote-tooltip-content .tooltip-inner {
+    font-size: 0.8125rem;
+    padding: 0.625rem 0.875rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .footnote-tooltip-content {
+    --bs-tooltip-max-width: 240px;
+  }
+  
+  .footnote-tooltip-content .tooltip-inner {
+    font-size: 0.75rem;
+    padding: 0.5rem 0.75rem;
+  }
+}

module/assets/js/footnote-tooltips.js

@@ -0,0 +1,97 @@
+/**
+ * Enhanced Footnote Citations with Bootstrap Tooltips
+ * 
+ * Adds interactive tooltips to footnote references that show citation details
+ * without requiring users to scroll to the bottom of the page.
+ * 
+ * Features:
+ * - Bootstrap 5 tooltip integration
+ * - HTML content support for links and formatting
+ * - Maintains click-through functionality
+ * - Automatic initialization on page load
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Extract and format footnote reference content
+   * @param {string} footnoteId - The footnote reference ID (e.g., "fn:1")
+   * @returns {string|null} HTML formatted tooltip content
+   */
+  function getFootnoteContent(footnoteId) {
+    // Find the corresponding footnote definition
+    const footnoteElement = document.getElementById(footnoteId);
+    if (!footnoteElement) {
+      return null;
+    }
+
+    // Clone the content to avoid modifying the original
+    const content = footnoteElement.cloneNode(true);
+    
+    // Remove the back-reference link (↩︎) from tooltip
+    const backRef = content.querySelector('.footnote-backref');
+    if (backRef) {
+      backRef.remove();
+    }
+
+    // Get the text content and format it
+    let html = content.innerHTML.trim();
+    
+    // Limit length for tooltip (optional)
+    const maxLength = 300;
+    if (html.length > maxLength) {
+      html = html.substring(0, maxLength) + '...';
+    }
+
+    return html;
+  }
+
+  /**
+   * Initialize tooltips for all footnote references
+   */
+  function initializeFootnoteTooltips() {
+    // Find all footnote references in the content
+    const footnoteRefs = document.querySelectorAll('a[href^="#fn:"]');
+    
+    footnoteRefs.forEach(ref => {
+      // Extract footnote ID from href
+      const href = ref.getAttribute('href');
+      const footnoteId = href.substring(1); // Remove the '#'
+      
+      // Get the footnote content
+      const tooltipContent = getFootnoteContent(footnoteId);
+      
+      if (tooltipContent) {
+        // Add Bootstrap tooltip attributes
+        ref.setAttribute('data-bs-toggle', 'tooltip');
+        ref.setAttribute('data-bs-placement', 'top');
+        ref.setAttribute('data-bs-html', 'true');
+        ref.setAttribute('data-bs-title', tooltipContent);
+        
+        // Add custom class for styling
+        ref.classList.add('footnote-tooltip');
+        
+        // Initialize the tooltip
+        new bootstrap.Tooltip(ref, {
+          html: true,
+          trigger: 'hover focus',
+          container: 'body',
+          boundary: 'viewport',
+          customClass: 'footnote-tooltip-content'
+        });
+      }
+    });
+  }
+
+  /**
+   * Initialize when DOM is ready
+   */
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeFootnoteTooltips);
+  } else {
+    // DOM already loaded
+    initializeFootnoteTooltips();
+  }
+
+})();

module/layouts/baseof.html

@@ -281,5 +281,9 @@
     {{- if $submenuJs -}}
     <script src="{{ $submenuJs.RelPermalink }}"></script>
     {{- end -}}
+    {{- $footnoteTooltipsJs := resources.Get "js/footnote-tooltips.js" -}}
+    {{- if $footnoteTooltipsJs -}}
+    <script src="{{ $footnoteTooltipsJs.RelPermalink }}"></script>
+    {{- end -}}
   </body>
 </html>