Skip to content

Instantly share code, notes, and snippets.

@chall8908
Created December 25, 2018 00:11
Show Gist options
  • Save chall8908/93892e1abd437dbae5052c60be62e1cf to your computer and use it in GitHub Desktop.
Save chall8908/93892e1abd437dbae5052c60be62e1cf to your computer and use it in GitHub Desktop.
FIMFic POC Footnote Tooltip
(function () {
const popupBackgroundColor = '#efefef';
const popupTextColor = '#333';
const popupBorderColor = '#aaa';
function gogoGadgetFootnotePopup() {
const footnotes = document.querySelectorAll('.footnote');
footnotes.forEach(node => {
node.addEventListener('mouseenter', displayFootnotePopup);
node.addEventListener('mouseleave', destroyFootnotePopup);
});
}
function displayFootnotePopup() {
const noteNumber = parseInt(this.textContent, 10);
const noteIndex = noteNumber - 1; // notes are 1-indexed, nodes are 0-indexed
const parent = this.closest('.bbcode');
const footnotes = parent.querySelector('.footnotes');
const noteHTML = footnotes.children[noteIndex].innerHTML;
const popup = buildPopoup(noteHTML);
// properly position the popup
popup.style.top = this.offsetTop + 'px';
popup.style.left = (this.offsetLeft + this.offsetWidth) + 'px';
this.appendChild(popup);
}
function destroyFootnotePopup() {
this.querySelector('.footnote-popup').remove();
}
function buildPopoup(innerHTML) {
const popup = document.createElement('div');
popup.classList.add('footnote-popup');
popup.style.paddingLeft = '5px';
popup.style.position = 'absolute';
const popupContent = document.createElement('div');
popupContent.innerHTML = innerHTML; // add the actual footnote content
popupContent.classList.add('footnote-popup-content');
popupContent.style.padding = '0px 5px';
popupContent.style.background = popupBackgroundColor;
popupContent.style.color = popupTextColor;
popupContent.style.border = '1px solid ' + popupBorderColor;
popupContent.style.borderRadius = '3px';
const popupPointer = document.createElement('div');
popupPointer.classList.add('footnote-popup-pointer');
popupPointer.style.position = 'absolute';
popupPointer.style.top = '4px';
popupPointer.style.left = '-4px';
popupPointer.style.height = '0px';
popupPointer.style.width = '0px';
popupPointer.style.border = '5px solid transparent';
popupPointer.style.borderRightColor = popupBackgroundColor;
const popupPointerBorder = document.createElement('div');
popupPointerBorder.classList.add('footnote-popup-pointer-border');
popupPointerBorder.style.position = 'absolute';
popupPointerBorder.style.top = '3px';
popupPointerBorder.style.left = '-6px';
popupPointerBorder.style.height = '0px';
popupPointerBorder.style.width = '0px';
popupPointerBorder.style.border = '6px solid transparent';
popupPointerBorder.style.borderRightColor = popupBorderColor;
popup.appendChild(popupPointerBorder);
popup.appendChild(popupPointer);
popup.appendChild(popupContent);
return popup;
}
gogoGadgetFootnotePopup();
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment