Footnotes as hovertext

Footnotes contain additional information placed at the bottom of a page; information that is relevant but not strictly needed for understanding the text that is being read. Because of its very nature (footnote), a footnote on being clicked immediately results in the page scrolling down to the very bottom; the reader has to, thereafter, manually return to the point being read earlier. Presenting the footnote text as a hover text on mouseover gives a reader the option to not jump immediately to the bottom of the page.

Example of footnote as hovertext in action

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor1 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aah ko chaahiye ik umr asar hone tak, kaun jeeta hai teree zulf ke sar hone tak. Bas ki dushwaar hai har kaam ka aasaan hona, admi ko bhi muyassar naheen insaan hona. Chand tasveer-e-buta, chand haseeno ke khatoot, bad marne ke mere ghar se ye saaman nikla. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur2 adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aah ko chaahiye ik umr asar hone tak, kaun jeeta hai teree zulf ke sar hone tak. Bas ki dushwaar hai har kaam ka aasaan hona, admi ko bhi muyassar naheen insaan hona. Chand tasveer-e-buta, chand haseeno ke khatoot, bad marne ke mere ghar se ye saaman nikla. Dil hi to hai, na sang-o-khisht, dard se na bhar aye kyun? Ek din hamare annsoon humse pooch baithe...humey roz -roz kyon bulate ho. Fir kuch is dil ko beqaraari hai, seena zoya-e-zakhm-e-kaari hai. Go hath ko jumbish nahin ankhon men to dum hai, rehne do abhi sagar-o-meena mere aage. Har ek baat pe kehte ho tum ke tu kya hai, tum hi kaho, ke ye andaaz-e-guftgu kya hai? Ishq ne humein nikamma kar diya Ghalib, warna aadmi they hum bade kaam ke. Jo unke dekhe se aa jati hai munh pe raunaq, to woh kehte hain: beemar ka haal achchha hai. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aah ko chaahiye ik umr asar hone tak, kaun jeeta hai teree zulf ke sar hone tak. Bas ki dushwaar hai har kaam ka aasaan hona, admi ko bhi muyassar naheen insaan hona. Chand tasveer-e-buta, chand haseeno ke khatoot, bad marne ke mere ghar se ye saaman nikla. Dil hi to hai, na sang-o-khisht, dard se na bhar aye kyun? Ek din hamare annsoon humse pooch baithe...humey roz -roz kyon bulate ho. Fir kuch is dil ko beqaraari hai, seena zoya-e-zakhm-e-kaari hai. Go hath ko jumbish nahin ankhon men to dum hai, rehne do abhi sagar-o-meena mere aage. Har ek baat pe kehte ho tum ke tu kya hai, tum hi kaho, ke ye andaaz-e-guftgu kya hai? Ishq ne humein nikamma kar diya Ghalib, warna aadmi they hum bade kaam ke. Jo unke dekhe se aa jati hai munh pe raunaq, to woh kehte hain: beemar ka haal achchha hai. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Footnotes

1. Ab kya misaal doon main tumhare shabab ki. See chahak.

2. Aadmi musafir hai, aata hai jaata hai. Ik din bik jayega maati ke mol.


How to implement hovertext for footnotes

Where is the Javascript code and stylesheet file

The Javascript code is in the "scripts" folder, "fnotehovertext.js" file. The styling rule is in the "css" folder, "fnotehovertext.css" file.