Footnote Hover Preview — Free Accessible Popover Footnotes HTML CSS JS

<article class="fhp-article">
  <h2>The Quiet Migration</h2>
  <p>By the time the survey teams reached the delta, the pattern was already well documented<sup class="fhp-ref" tabindex="0" data-note="1">1</sup> — communities were not fleeing catastrophe so much as drifting, year over year, toward higher ground and steadier water. Economists had long treated this as a footnote to bigger crises<sup class="fhp-ref" tabindex="0" data-note="2">2</sup>, but the scale of it kept surprising the people counting.</p>
  <p>What made the shift hard to see in real time was its slowness. No single year looked remarkable. It was only in aggregate, across a decade of township records<sup class="fhp-ref" tabindex="0" data-note="3">3</sup>, that the drift became a line worth drawing on a map.</p>
</article>

<ol class="fhp-notes" id="fhpNotes">
  <li id="fhp-note-1">Regional Hydrological Survey, 3rd ed. (2021), pp. 44–52.</li>
  <li id="fhp-note-2">See Alden &amp; Kowalczyk, "Displacement Without Disaster," <i>Journal of Regional Economics</i>, 2019.</li>
  <li id="fhp-note-3">Township registrar filings, compiled 2011–2021, cross-referenced against census delta.</li>
</ol>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Georgia,'Times New Roman',serif;background:#faf7f2;color:#2b271f;min-height:100vh;padding:48px 20px;display:flex;justify-content:center;align-items:center}

.fhp-article{max-width:560px;position:relative}
.fhp-article h2{font-size:26px;margin-bottom:18px;font-weight:700;letter-spacing:-.01em}
.fhp-article p{font-size:16.5px;line-height:1.75;margin-bottom:16px}

.fhp-ref{font-family:system-ui,sans-serif;font-size:11px;font-weight:700;color:#b45309;cursor:pointer;padding:0 1px;border-radius:3px;outline-offset:2px}
.fhp-ref:hover,.fhp-ref:focus-visible{background:#fde68a;outline:2px solid #b45309}

.fhp-popover{position:absolute;z-index:10;max-width:260px;background:#241f17;color:#f3ede1;font-family:system-ui,sans-serif;font-size:12.5px;line-height:1.55;padding:11px 13px;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.25);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease}
.fhp-popover.fhp-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.fhp-popover::after{content:'';position:absolute;bottom:-5px;left:16px;width:10px;height:10px;background:#241f17;transform:rotate(45deg)}
.fhp-popover.fhp-above::after{bottom:auto;top:-5px}
.fhp-popover b{color:#fbbf24;display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}

.fhp-notes{max-width:560px;margin:28px auto 0;padding-top:18px;border-top:1px solid #e2d9c8;font-family:system-ui,sans-serif;font-size:13px;color:#5c5546;line-height:1.6}
.fhp-notes li{margin-bottom:6px;padding-left:4px}

var popover = document.createElement('div');
popover.className = 'fhp-popover';
popover.setAttribute('role', 'tooltip');
document.body.appendChild(popover);

var hideTimer = null;
var activeRef = null;

function noteTextFor(ref) {
  var id = ref.dataset.note;
  var li = document.getElementById('fhp-note-' + id);
  return li ? li.innerHTML : '';
}

function positionPopover(ref) {
  var rect = ref.getBoundingClientRect();
  var scrollX = window.scrollX;
  var scrollY = window.scrollY;

  popover.style.left = '0px';
  popover.style.top = '0px';
  popover.classList.remove('fhp-above');

  var popRect = popover.getBoundingClientRect();
  var left = rect.left + scrollX - popRect.width / 2 + rect.width / 2;
  left = Math.max(8, Math.min(left, document.documentElement.clientWidth - popRect.width - 8 + scrollX));

  var top = rect.top + scrollY - popRect.height - 12;
  if (rect.top - popRect.height - 12 < 0) {
    // Not enough room above the marker — flip the popover below it instead.
    top = rect.bottom + scrollY + 12;
    popover.classList.add('fhp-above');
  }

  popover.style.left = left + 'px';
  popover.style.top = top + 'px';
}

function showFor(ref) {
  clearTimeout(hideTimer);
  activeRef = ref;
  popover.innerHTML = '<b>Footnote ' + ref.dataset.note + '</b>' + noteTextFor(ref);
  popover.classList.add('fhp-visible');
  positionPopover(ref);
}

function scheduleHide() {
  clearTimeout(hideTimer);
  hideTimer = setTimeout(function () {
    popover.classList.remove('fhp-visible');
    activeRef = null;
  }, 120);
}

document.querySelectorAll('.fhp-ref').forEach(function (ref) {
  ref.addEventListener('mouseenter', function () { showFor(ref); });
  ref.addEventListener('mouseleave', scheduleHide);
  ref.addEventListener('focus', function () { showFor(ref); });
  ref.addEventListener('blur', scheduleHide);
  ref.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') { popover.classList.remove('fhp-visible'); ref.blur(); }
  });
});

// Keep the popover open while the pointer moves onto it (in case it's ever made interactive).
popover.addEventListener('mouseenter', function () { clearTimeout(hideTimer); });
popover.addEventListener('mouseleave', scheduleHide);

window.addEventListener('scroll', function () {
  if (activeRef) positionPopover(activeRef);
}, { passive: true });