Preview footnotes on hover

_static/custom.js

@@ -0,0 +1,26 @@
+function initFootnotes() {
+	var elPreview = document.getElementById('footnote-preview');
+	
+	function mouseoverFootnote(evt) {
+		var fnText = document.querySelector(evt.target.getAttribute('href')).nextElementSibling.children[0].innerHTML;
+		elPreview.innerHTML = fnText;
+		elPreview.style.display = 'block';
+		elPreview.style.top = (evt.target.getBoundingClientRect().top + 16) + 'px';
+		elPreview.style.left = evt.target.getBoundingClientRect().left + 'px';
+	}
+
+	function mouseoutFootnote(evt) {
+		elPreview.style.display = 'none';
+	}
+
+	document.querySelectorAll('a.footnote-reference').forEach(function(el) {
+		el.addEventListener('mouseenter', mouseoverFootnote);
+		el.addEventListener('mouseleave', mouseoutFootnote);
+	});
+}
+
+if (document.readyState === 'complete' || document.readyState === 'interactive') {
+	initFootnotes();
+} else {
+	document.addEventListener('DOMContentLoaded', initFootnotes);
+}

_static/custom_html.css

@@ -75,6 +75,17 @@ dl.footnote dt:hover span.fn-backref {
 	display: inline;
 }
 
+#footnote-preview {
+	position: fixed;
+	display: none;
+	color: #3E4349;
+	background-color: white;
+	z-index: 999;
+	border: 1px solid #999;
+	border-radius: 4px;
+	padding: 2px;
+}
+
 /* Sidebar */
 
 div.sphinxsidebarwrapper p.caption {

conf.py

@@ -67,6 +67,7 @@ html_sidebars = {'*': ['about.html', 'navigation.html', 'searchbox.html']}
 html_static_path = ['_static']
 
 html_css_files = ['custom_html.css'] # custom.css automatically included by alabaster
+html_js_files = ['custom.js']
 
 html_extra_path = ['epub-cover.xhtml', 'epub-copyright.xhtml']
 
@@ -98,4 +99,4 @@ epub_cover = ('_static/cover.jpg', '')
 epub_pre_files = [('epub-cover.xhtml', ''), ('epub-copyright.xhtml', '')]
 epub_css_files = ['custom.css', 'custom_epub.css']
 epub_show_urls = 'no'
-epub_exclude_files = ['_static/file.png', '_static/minus.png', '_static/plus.png', '_static/custom_html.css']
+epub_exclude_files = ['_static/file.png', '_static/minus.png', '_static/plus.png', '_static/custom_html.css', '_static/custom.js']

potheme_html/layout.html

@@ -5,6 +5,8 @@
       
       <div style="clear:both;"></div> {# Fix interaction with floating .sphinxsidebar #}
       
+      <div id="footnote-preview"></div>
+      
       <div class="pre-footer">
         <a href="https://gumroad.com/l/KErDHC">Buy the ebook: Pay what you want</a>
       </div>