DHTML pop-up footnotes.

This example dates from the period when DHTML — Dynamic HTML — was the standard term for in-browser scripting that modified the page after load. It predates jQuery and the modern accessibility-API conventions, and the page is preserved here for the readers who linked to it from CSS-creator forum threads, the microformats discussion list, and various academic-citation reference pages over the years.

The behavior

Each footnote marker in the body is a small superscripted link. Hovering the marker pops up a small balloon containing the note text positioned next to the marker. Moving the cursor away dismisses the balloon. Clicking the marker navigates to a permanent note location at the bottom of the page, for readers who want to read the note in context without holding the cursor in place.

The markup (period-typical)

<p>
  ... text leading to a citation
  <a href="#fn1" id="ref1"
     class="popfn"
     onmouseover="showFn(this, 'fn1')"
     onmouseout="hideFn(this)">1</a>.
</p>

<div id="fn-popups" style="display:none;">
  <div id="fn1-text">
    Author, <em>Title</em> (Place: Publisher, Year), pp.
  </div>
</div>

The script (period-typical)

function showFn(marker, fnId) {
  var src = document.getElementById(fnId + '-text');
  if (!src) return;
  var pop = document.createElement('div');
  pop.className = 'fn-popup';
  pop.id = 'live-' + fnId;
  pop.innerHTML = src.innerHTML;
  var rect = marker.getBoundingClientRect();
  pop.style.left = (rect.left + window.scrollX) + 'px';
  pop.style.top  = (rect.bottom + window.scrollY + 4) + 'px';
  document.body.appendChild(pop);
}
function hideFn(marker) {
  var live = document.getElementById('live-' + marker.id.replace('ref','fn'));
  if (live) live.parentNode.removeChild(live);
}

Accessibility — what this approach gets wrong

The DHTML pop-up approach has well-known accessibility limitations that have only become more important as the accessibility-API conventions have matured:

• Hover-only triggers exclude readers using keyboard navigation. Modern equivalents must respond to focus as well.
• No screen-reader announcement of the popup's appearance. Modern equivalents need ARIA attributes (aria-describedby, role tooltip, or an accessible disclosure pattern).
• Hover-target loss on touch devices. The popup either never appears or never dismisses; modern equivalents need explicit tap-to-toggle behavior.

For new academic-prose deployments, the sidenote (variant 2) approach is the more durable choice. The DHTML page is preserved here as a historical artefact of how the problem was approached before the accessibility conventions matured.