FIMFic POC Footnote Tooltip

footnote-tooltip.js

(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();
}());