Pop-up Footnotes

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.

footnote in a flowing book

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:

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="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">. . .<p> <a href="chapter.xhtml#myNote" epub:type="noteref">1</a></p><aside id="myNote" epub:type="footnote">Text in popup</aside>. . .</html>

Note: Use of the epub:type attribute requires the inclusion of the namespace xmlns:epub="http://www.idpf.org/2007/ops in the <html> element.

If your book requires a specific text direction, such as right-to-left, and you want the footnote text direction to match, wrap the footnote text in a <p> element and add a style to specify the text direction:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"> . . .<p> <a href="chapter.xhtml#myNote" epub:type="noteref">1</a></p><aside id="myNote" epub:type="footnote"><p style="direction:rtl">Text in popup</p></aside>. . .</html>

Note: When adding pop-up footnotes in EPUB 3 books, you can replace the <aside> element with a <div> or <p> element. Use the <aside> element when you want to hide the footnote; use a <div> or <p> element when you want the footnote to appear in the normal reading view. If you use <div> or <p> and a user clicks the footnote link, the content appears in a popup, but the footnote is also visible as part of the text on the page.