Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript for embedded hover footnotes in Ghost 1.0 default theme
/* 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'));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.