Creating pop-up footnotes in EPUB 3


In EPUB 3 Flowing and Fixed Layout books, you can create pop-up footnotes by labeling footnotes with the appropriate epub:type values. You use two elements to create a pop-up footnote: an anchor (<a>) element that triggers the popup and the <aside> element that contains the footnote text. Both elements have an epub:type attribute to identify their purpose: epub:type="noteref" to trigger the popup and epub:type="footnote" to indicate the footnote’s text.

In the example below, the anchor element (<a>) has two attributes: epub:type="noteref" and a link that references the location of the element that contains the popup's text.

The <aside> element that contains the popup's text also has two attributes:

  • id="myNote" that matches the value of the href attribute in the link that references it

  • epub:type="footnote"

Because the <aside> element has an epub:type of footnote, the text is hidden in the main body of the book. The text will only be seen by the reader in the context of the popup.

<html xmlns="" xmlns:epub="">
    <a href="chapter.xhtml#myNote" epub:type="noteref">1
  <aside id="myNote" epub:type="footnote">Text in popup</aside>


Footnote and reference

<p>lorum ipsum.<a epub:type="noteref" href="#fn01">1</a></p>
<aside epub:type="footnote">
   My footnote

Endnote and reference

<p>lorum ipsum.<a epub:type="noteref" href="#en01">1</a></p>
<aside epub:type="endnote">
   My endnote

Endnotes section

<section epub:type="endnotes">
     <h2>Chapter 1</h2>
     <aside epub:type="endnote">
       My endnote

Add comment