PopUpFootNotes.xsl

From: Joe Wicentowski (user: joewiz, domain: 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, but it's fairly simple to have the XSL generate footnote numbers for you.)

Source text: TEI is an interesting markup language. See tei-c.org.

XSLT:           

     <html:sup> <xsl:value-of select="@n"/> </html:sup> <html:span class="footnoteinline"><xsl:value-of select="@n"/>.&#160;<xsl:value-of select="."/></html:span> </html:a> </xsl:template>

 <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>&#160;<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; }