JavaScript for embedded hover footnotes in Ghost 1.0 default theme

embedded-hover-footnotes.js

/* Inject this code in your blog footer of your Ghost blog */
var createTooltip = function(tooltiptext) {
    var tooltip = document.createElement('span');
    tooltip.setAttribute('class', 'tooltiptext');
    tooltip.innerHTML = tooltiptext;
    return tooltip;
}
var appendTooltipTo = function(element, tooltipText) {
    element.append(createTooltip(tooltipText));
}
var processTooltip = function(footnoteid) {
    var footnotep = document.getElementById(footnoteid).querySelector('p');
    var footnotetext = footnotep.innerHTML;
    var footnoterefid = document.getElementById(footnoteid).querySelector('a.footnote-backref').getAttribute('href').substring(1);
    var footnoteref = document.getElementById(footnoterefid);
    footnoteref.setAttribute('class', 'tooltip');
    appendTooltipTo(footnoteref, footnotetext);
}
var footnotes = document.querySelectorAll('li.footnote-item');
[].forEach.call(footnotes, function( element ) {
    processTooltip(element.getAttribute('id'));
});