The IDPF website explains the proper syntax for marking up footnotes semantically, that is, by labeling them as footnotes:
<p>In chapters 24, 89, and 90, we substituted a capital L for the symbol for the British pound, a unit of currency.<a epub:type="noteref" href="#n1">1</a></p>
This snippet is from an EPUB 3 version of Moby Dick, coded by Dave Cramer.
And then the EPUB 3 spec goes on to say that a Reading System may associate specialized behaviors with that syntax, and it looks like Apple has associated the pop-up functionality to the combination of
So, to make a pop-up footnote in EPUB 3 (which works in iBooks), you just have to create your footnote marker link as shown above, paying special care to include the
epub:type="noteref"attribute/value pair. I'll repeat it here for good measure:
<a epub:type="noteref" href="#n1">1</a></p>
Next, create an
asideelement that contains the text that should appear in a pop-up display when the link is pressed.
asideelement must also have the
epub:type="footnote"attribute/value pair to mark it as the footnote content as well as an
idattribute that matches the value of the
hrefattribute in your link.
<aside epub:type="footnote" id="n1">
<p>These have been corrected in this EPUB3 edition.</p>
Note that the
asideelement, which is new to HTML5, is automatically hidden by iBooks. If you put your footnotes in, say, a
divelement, it would still pop-up when the link was pressed, but it would always be visible as a regular part of the text as well.
Another thing that I noticed is that you can enclose your
supelements so that your footnote markers are raised with respect to the surrounding text, but make sure it's outside the
aelement or else it will break your pop-up footnote.
And that's it. Look! It works!
Here it is in a horizontally-oriented iBooks:
And here it is vertically:
Note that I completely disabled the CSS on this document, to be sure that the pop-up had nothing to do with any CSS effect.
And notice that the font in the pop-up changes to match the font chosen in the Font menu (here I've chosen Seravek):
OK, there are now two desktop EPUB 3 readers, and iBooks and the iBookstore have officially announced support as well. And there are pop-up footnotes. What are you waiting for to start creating EPUB 3 ebooks?