PopUpFootNotes.xsl

From: Joe Wicentowski <joewiz@GMAIL.COM>

This footnote implementation (using CSS and XSL) gives you "pop-up" text for footnotes when you hover over them in the text, and places a copy of the footnote text below the text. Though not all browsers support the CSS, this implementation degrades gracefully in my testing; you can click on footnote numbers and go back and forth between the text and the footnote text. (Note: This implementation assumes you provide the footnote number in the form <note n="1">, but it's fairly simple to have the XSL generate footnote numbers for you.)

Source text:

TEI is an interesting markup language.<note n="1">See tei-c.org.</note>

XSLT:

   <xsl:template name="document">
       <html:div class="document">
           <xsl:apply-templates/>
           <xsl:if test="count(//tei:note) > 0">
               <html:hr/>
               <html:div class="footnotes">
                   <xsl:apply-templates select="//tei:note" mode="endlist"/>
               </html:div>
           </xsl:if>
       </html:div>
   </xsl:template>

   <xsl:template match="tei:note">
       <xsl:variable name="inc">
           <xsl:number level="any" count="tei:note"/>
       </xsl:variable>
       <html:a href="#fn{$inc}" name="fnref{$inc}">
           <html:sup>
               <xsl:value-of select="@n"/>
           </html:sup>
           <html:span class="footnoteinline"><xsl:value-of
                   select="@n"/>. <xsl:value-of
                   select="."/></html:span>
       </html:a>
   </xsl:template>

   <xsl:template match="tei:note" mode="endlist">
       <xsl:variable name="incr">
           <xsl:number level="any" count="tei:note"/>
       </xsl:variable>
       <html:p><html:a href="#fnref{$incr}" name="fn{$incr}"
                   title="Return to text">
               <html:sup>
                   <xsl:value-of select="@n"/>
               </html:sup>
           </html:a> <xsl:value-of select="."/><xsl:text/></html:p>
   </xsl:template>

CSS:
  /* sup is used for footnote reference numbers */
  sup {
	vertical-align: super;
	font-size: smaller;
	line-height: 0em;
	background-color:#F0F2EC;
	border: solid 1px #CCCCCC;
	padding: 1px 3px 1px 3px;
	}

   /* sets up line height for document paragraphs so the footnote
       superscript fits */
  div.document p {
    line-height: 1.7em;
    margin-top: 1.5em;
    }

  /* controls the rendering of text in the footnote div */
  div.footnotes, div.footnotes p {
	font-weight: normal;
	font-size: .973em;
	}

  /* suppresses display of inline footnote text, setting up the pop-up on hover */
     a span.footnoteinline {
	display: n o n e;
   }

   /* turns on inline footnote text on hover, producing the pop-up */
     a:hover span.footnoteinline {
	display: block;
	position: relative;
	margin: 5px;
	padding: 7px;
	font-size: .825em;
	line-height: 1.75em;
	text-transform: none;
	font-weight: normal;
	background-color:#F0F2EC;
	outline-style:solid;
	outline-width:1px;
	outline-color:#CCCCCC;
	}