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:

    <!-- The 'document' template. Sets up an HTML div tag to surround the
    resulting document.  Inside goes the document, and if the document
    contains footnotes, it runs the 'tei:note endlist' template, which puts
    a copy of the footnotes inside a div tag after the document. -->
    <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><!-- end endnotes div -->
            </xsl:if>
        </html:div><!-- end document div -->
    </xsl:template>

    <!-- Template for footnote references, inline with the text.
    Sets up cross-references to footnote text that appears after
    the document. -->
    <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>

    <!-- Template for footnote text that should appear following
    the document, with cross references back to where the footnote
    originally appears. -->
    <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: none;
   }

   /* 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;
	}