Next post Previous post

Popup footnotes

May 3, 2010 at 8:01 AM by Dr. Drang

Following this tip on Clark’s Tech Blog, I went to Lukas Mathis’s site (why isn’t he one of my RSS subscriptions?) and found a great bit of JavaScript/jQuery for putting footnotes into a popup box when you hover the mouse over the footnote link.1

I really like this. The footnote text is still on the page, right where it’s always been, and clicking the link will still take you there. There’s no loss in functionality on platforms that don’t support hovering, just a gain on those that do.

And the improvement in readability is significant. Now you can see the footnote in the context of the main body of the text without jumping back and forth. It’s the way hypertext should work, not an imitation of paper-based reading.

I added Mathis’s code to my site and it worked immediately. I made some changes to integrate the look of the popup to my design, all of which were in the div.css call. Here’s my version:

 1:  div.css({
 2:      position:'absolute',
 3:      width:'400px',
 4:      background:'#ded',
 5:      padding:'0em 1em 0em 1em',
 6:      border:'solid 1px',
 7:      'font-size':'90%',
 8:      'font-family': 'Helvetica, Sans-serif',
 9:      'line-height':1.4,
10:      '-moz-border-radius':'.5em',
11:      '-webkit-border-radius':'.5em',
12:      'border-radius':'.5em',
13:      opacity:0.95
14:  });

Lines 4-12 are my additions. As you can see, this is just styling, styling I’ll probably change as spend more time with it. The functionality—not shown in this exerpt—is all Mathis’s.

Update 5/16/10
Since this post was published, I’ve added one line of functionality to get rid of the little return link, ↩, from the end of the popup footnotes. The addition is described here.

  1. Yes, just like that! ↩

Next post Previous post