Answers.Body: <p>There are two possibilities here, and without seeing more of the book's code, it's not really possible to tell. The first is that this is extra functionality offered by the reading system rather than something built into the epub file itself. As noted by Liz Castro in <a href="http://www.idpf.org/epub/30/spec/epub30-contentdocs.html#sec-contentdocs-vocab-association" rel="nofollow noreferrer">the spec</a>, this is similar to Apple's example of</p>
  
  <blockquote>
    <p>supporting symantically marked footnotes, and then "associating specialized behaviors" as the spec directs.</p>
  </blockquote>
  
  <p>If that's the case, Moon+ and Calibre don't seem to be supporting the epub 3 spec as directly as Apple does, though&mdash;according to the <a href="http://www.idpf.org/epub/vocab/structure/#" rel="nofollow noreferrer">Structural Semantics Vocabulary</a> for epub 3, footnotes should be contained in <code>&lt;aside&gt;</code> tags marked with <code>epub:type=footnote"</code> and then corresponding <code>epub:type="noteref"</code>s for the superscripted symbols in the body.</p>
  
  <p>The other possibility is that there is some JavaScript in the ebook file that is somehow accessing content in a different file. Since JavaScript is generally constrained by the DOM, though, this doesn't seem likely.</p>
  
  <p>if you'd like to replicate the behavior yourself in an epub 3 file, the relevant code (heavily cribbed from <a href="http://www.idpf.org/epub/30/spec/epub30-contentdocs.html#sec-contentdocs-vocab-association" rel="nofollow noreferrer">the spec</a>) to try out would be:</p>
  
  <pre><code>&lt;p&gt;This is some body text with a footnote reference. &lt;a class="noteref" epub:type="noteref" href="#note1"&gt;1&lt;/a&gt;&lt;/p&gt;
  
  ...
  
  &lt;aside class="footnote" epub:type="footnote" id="note1"&gt;1: This is a corresponding note&lt;/aside&gt;
  </code></pre>
  
  <p>Note that this behavior is purely optional&mdash;epub 3 has the ability for publishers to tell the reading system what kind of content a particular section is, and it is up to the reading systems to decide what they want to do with that information.</p>
  
  <p>EDIT: Based on your comment, it sounds like since there is no JavaScript and the book is epub 2.0, there is either something hack-y going on or the reading systems you're using are looking for particular classes and associating special behavior with them. Based on <a href="http://empiricalepub.blogspot.com/2012/09/pop-up-footnotes-in-ibooks-with-sigil.html" rel="nofollow noreferrer">this blog post</a>, I'm guessing the former&mdash;it sounds like you can include the correct namespacing in an epub 2 file to allow <code>epub:type</code> to work, and change the <code>&lt;aside&gt;</code> tag to a <code>&lt;p&gt;</code> with <code>display: none</code> on its CSS to get this to work in iBooks, which Moon+ and Calibre might be copying.</p>
  
  <p>Note that according to that blog post, this gives you a working ebook that fails epubCheck, which means that many retailers will reject it. Making an epub 3 file might be the way to go for you.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-06-14T09:36:38.383Z
Answers.Text: thanks for the answer! content.opf does not show any javascript, and a search found no <aside>. content.opf starts with <ns0:package xmlns:ns0="http://www.idpf.org/2007/opf" unique-identifier="BookId" version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:ns2="http://bookrepublic.it/2010/"> which I assume is ePub2, and the book seems to have been converted via sigil (there's no DRM, just a watermark saying I purchased it, this is why I can look at it). I am puzzled because I'd like to replicate this behavior in ePub2 :-)
Answers.UserDisplayName: mau
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-06-14T15:48:26.630Z
Answers.Text: I just edited my answer to address your comment, fyi
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-09-22T01:38:55.043Z
Answers.Text: When I try to use `display: none` the clicking on the footnote link generates a popup but that popup is empty.
Answers.UserDisplayName: Schneems
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-09-22T12:53:32.143Z
Answers.Text: FWIW I ended up moving all my content to the end of the chapter, it still shows up in the epub but at least it's grouped in a section now labeled "footnotes".
Answers.UserDisplayName: Schneems
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2015-06-13T23:19:45.847Z
Answers.LastActivityDate: 2019-11-18T17:06:36.753Z
Answers.LastEditDate: 2019-11-18T17:06:36.753Z
Answers.UserDisplayName: Tom
Body: <p>In an ebook I bought, if you click on the number of a footnote the text of the note appears as a popup, and you may choose to close the popup or go to the chapter with footnotes. I noticed this behavior both on Moon+Reader and in Calibre reader, so I am confident it depends from the raw text of the epub. </p>
  
  <p>However, I looked at the source code and I did not find anything hinting at this. The source for a footnote is </p>
  
  <pre><code>&lt;span class="apice"&gt;&lt;a href="../Text/base7.html#fnref15" id="fn15"&gt;[15]&lt;/a&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The text for the note starts with </p>
  
  <pre><code>&lt;p class="Note"&gt;&lt;span class="apice-note"&gt;&lt;a href="../Text/base4.html#fn15" 
  id="fnref15"&gt;[15]&lt;/a&gt;&lt;/span&gt; blah blah ... &lt;/p&gt;
  </code></pre>
  
  <p>and the relevant CSS is </p>
  
  <pre><code>p.Note {
    font-size : 0.75em;
    line-height : 1.2;
    text-align : left;
    color : #000000;
    text-indent : 0px;
    margin : 0px 0px 7px 0px;
  }
  span.apice {
    font-weight : normal;
    font-style : normal;
    font-size : 0.70em;
    vertical-align : super;
    color : #000000;
  }
  span.apice-note {
    font-weight : normal;
    font-style : normal;
    font-size : 0.80em;
    vertical-align : super;
    color : #000000;
  }
  </code></pre>
  
  <p>Where is the trick?</p>
  
  <p><b>Addendum:</b> It seems indeed that I casually picked two of the very few reader applications which support footnotes - see <a href="https://www.facebook.com/674425382587296/photos/a.674438545919313.1073741826.674425382587296/715204005176100/" rel="noreferrer">this announcement on Facebook</a> for Moon+ Reader and <a href="http://www.mobileread.com/forums/showthread.php?t=257376" rel="noreferrer">this thread</a> for Calibre.</p>
  
Tags: <css><formatting><footnotes>
Title: footnote as popup in epub
UserDisplayName: mau
ThreadText: # footnote as popup in epub
  
  (Asked by: username_0 on 2015-06-13)
  
  In an ebook I bought, if you click on the number of a footnote the text of the note appears as a popup, and you may choose to close the popup or go to the chapter with footnotes. I noticed this behavior both on Moon+Reader and in Calibre reader, so I am confident it depends from the raw text of the epub. 
  However, I looked at the source code and I did not find anything hinting at this. The source for a footnote is 
  [15]
  
  The text for the note starts with 
  [15] blah blah ... 
  
  and the relevant CSS is 
  p.Note {
    font-size : 0.75em;
    line-height : 1.2;
    text-align : left;
    color : #000000;
    text-indent : 0px;
    margin : 0px 0px 7px 0px;
  }
  span.apice {
    font-weight : normal;
    font-style : normal;
    font-size : 0.70em;
    vertical-align : super;
    color : #000000;
  }
  span.apice-note {
    font-weight : normal;
    font-style : normal;
    font-size : 0.80em;
    vertical-align : super;
    color : #000000;
  }
  
  Where is the trick?
  Addendum: It seems indeed that I casually picked two of the very few reader applications which support footnotes - see this announcement on Facebook for Moon+ Reader and this thread for Calibre.
  
  **Tags:** css, formatting, footnotes
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2015-06-13. Score: 7 | Accepted answer
  
  There are two possibilities here, and without seeing more of the book's code, it's not really possible to tell. The first is that this is extra functionality offered by the reading system rather than something built into the epub file itself. As noted by Liz Castro in the spec, this is similar to Apple's example of
  
  supporting symantically marked footnotes, and then "associating specialized behaviors" as the spec directs.
  
  If that's the case, Moon+ and Calibre don't seem to be supporting the epub 3 spec as directly as Apple does, though—according to the Structural Semantics Vocabulary for epub 3, footnotes should be contained in  tags marked with epub:type=footnote" and then corresponding epub:type="noteref"s for the superscripted symbols in the body.
  The other possibility is that there is some JavaScript in the ebook file that is somehow accessing content in a different file. Since JavaScript is generally constrained by the DOM, though, this doesn't seem likely.
  if you'd like to replicate the behavior yourself in an epub 3 file, the relevant code (heavily cribbed from the spec) to try out would be:
  This is some body text with a footnote reference. 1
  
  ...
  
  1: This is a corresponding note
  
  Note that this behavior is purely optional—epub 3 has the ability for publishers to tell the reading system what kind of content a particular section is, and it is up to the reading systems to decide what they want to do with that information.
  EDIT: Based on your comment, it sounds like since there is no JavaScript and the book is epub 2.0, there is either something hack-y going on or the reading systems you're using are looking for particular classes and associating special behavior with them. Based on this blog post, I'm guessing the former—it sounds like you can include the correct namespacing in an epub 2 file to allow epub:type to work, and change the  tag to a  with display: none on its CSS to get this to work in iBooks, which Moon+ and Calibre might be copying.
  Note that according to that blog post, this gives you a working ebook that fails epubCheck, which means that many retailers will reject it. Making an epub 3 file might be the way to go for you.
  
  > **Comments:**
  > **username_0**: thanks for the answer! content.opf does not show any javascript, and a search found no <aside>. content.opf starts with <ns0:package xmlns:ns0="http://www.idpf.org/2007/opf" unique-identifier="BookId" version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:ns2="http://bookrepublic.it/2010/"> which I assume is ePub2, and the book seems to have been converted via sigil (there's no DRM, just a watermark saying I purchased it, this is why I can look at it). I am puzzled because I'd like to replicate this behavior in ePub2 :-)  
  > **username_1**: I just edited my answer to address your comment, fyi  
  > **username_2**: When I try to use `display: none` the clicking on the footnote link generates a popup but that popup is empty.  
  > **username_2**: FWIW I ended up moving all my content to the end of the chapter, it still shows up in the epub but at least it's grouped in a section now labeled "footnotes".  
  
  ---
  
  