footnotes example

JQuery Hovering Footnotes

/74 Comments/in , /by

I have a number of articles with footnotes [1] that I wanted to post to my site, but I didn’t want to reformat them all and manually add the needed html. So I tried a number of footnote plugins like FD Footnotes, Footnotes for WordPress, WP-Footnotes and the YAFootnotes [2] Plugin, but none of them were exactly what I wanted.

I wanted a footnote plugin that would dynamically display the footnotes when you hovered or mouseovered the footnote link[3]. I also wanted to be able to put the footnote text either inline OR at the bottom and have the plugin dynamically put them together at the end of the article. So I pulled together some of the work from YaFootnotes by stratos, as well as this great javascript code combined with this (both using jQuery).

Usage

In order to use the plugin just add double braces around the footnote link like this {1}[4], and then add corresponding double bracketed numbers around the actual footnote. [1]My Footnote[1] (except double of course).

Look very closely at the below ‘Footnotes Test’ example image. At least half of the questions I get from people who cant get the plugin to work right, are because they are not formatting properly with TWO curly braces around the footnote link and TWO brackets around the footnote number before AND after the footnote text. (SEE EXAMPLE). It bassically follows the format of YaFootnotes. You would enter your footnotes according to the following format into the wordpress editor.

Then the php script reformats the code to spit out the following html in your page.

Which the browser then interprets with the javascript to add the dynamic popup. The plugin is also nice because you can put the footnote text either inline (right after the link), or at the bottom all together. Either way, the php code will parse it out of the body and stick them all together in a list in the footer. Then it uses jQuery to pull the footnote text out of the footer and dynamically stick it into the hoverbox so the user doesn’t have to go down to the footnote to read it (and so you don’t have to type it twice).

Also note, the ‘return to text’ symbol right now is just the ansi $crarr, but you could easily swap this out for a little image or just the words ‘back’. I will likely get around to adding this to the GUI some time[5], so you don’t have to delve into the php file to do it.

Also be aware that the plugin does reference jquery, as well as its own small javascript and css file. If you would like to make changes to the pop-up styling, you can do so in the css file. Also, if you are concerned with these 3 files loading on each page, you could cut and paste the css into your theme style sheet and then comment out the load reference in the main php file. I plan on adding the capability in the back end to disable the loading of these external files and the dynamic popup capabilities that the files provide.

Download it here.

If you have a feature request you can leave a comment below, or if things are busy for me you may have better luck by dropping a small donation to encourage me to help. (Or if you love the plugin and just want to say thanks)

.

I actually have footnotes hidden in my blog, but if I didnt this is how the footnote list would look here at the bottom of the page. (and the links would work right)

Footnotes    (↵ returns to text)

  1. Such as this one.↵
  2. I liked YaFootnotes because it was so simple and had very compact code↵
  3. Like a lot of the jQuery footnote packages I’v seen out there.↵
  4. I cant put double braces here, or it would become a footnote, and I didnt want to go to the work of making a picture of an individual example. So please just picture double braces and brackets instead of the single ones you see here.↵
  5. This is a work in progress.↵
You might also like
Footnotes Plugin
Footnote Test & Heading Test (H1, H2, etc)
74 replies
Newer Comments »
  1. Thomas says:

    Works great. I had a recommendation. What if you did an if statement or two that tested the length of the string and if it is less than your default width it makes it fit the text, then for strings as long as your default it does like you have, but then for really long strings of text in the footnote it has a maximum length and puts in a scroll bar.

  2. admin says:

    I’v implemented your suggestion. the only bug with it is, that the scroll bar will artifact if it is over a dark background in Google chrome. This is a known bug with chrome and they are working on it.

    Let me know what you think.

  3. Shalzers says:

    Pretty much gave up finding the plugins webpage in the WP Plugins Directory when I stumbled upon it in the other notes.

    Don’t think I am alone wanting that to be the first thing I see.

  5. Klaus says:

    What a great plugin. Thank you!

    Is it possible to not show the footnotes at the bottom of the page? (Just show the popups)

  6. Klaus says:

    One other thing….The pop up is not appearing on a test. In entered the brackets properly, and the footnote is showing in the footnotes list at the page bottom, but no pop up on mouse-over. (I have tested in IE8 and Firefox 3.6.13. and pop up blocking is not engaged for either.) Thanks.

  7. admin says:

    I fixed your problem. had to do with the way the js was loaded.

    And yes, I was just thinking about how I should add that option. its kind of redundant to have it at the bottom and in the popup.. I was thinking maybe having it default to not show, but have a link at the bottom that said “show footnotes” or something. perhaps i’ll work on adding that some time in the next month or so.

  8. admin says:

    Looks like a php problem. I fixed it by updating these two lines of code

    wp_enqueue_script(‘footenote_js’, plugins_url(‘/footnote-voodoo.js’, __FILE__), array(‘jquery’));
    // it would save load to put these css rules into your template css and comment this next line out
    wp_enqueue_style(‘footenote_css’, plugins_url(‘/footnote-voodoo.css’, __FILE__) );

    the new version should post to the wp site within about 15 min.
    Im also adding the ability to hide footnotes.. it will take about 25 min.

    -lance

  9. Klaus says:

    Hey Lance,

    That is great news. As you saw, this site is just underway, so I can sure wait until the latest (and greatest!) is posted on the WP site and update accordingly.

    Thanks again from so many of us who are benefiting from your hard work on this plugin.

    Klaus

  11. Jacob says:

    Great plugin. One question – is there a way to generate the Footnote list at the bottom by a means other than an ordered list? This causes problems with a long reference list that spans several pages. For example, references 1-10 may appear on page one, and 20-30 on page two. The in-text citation works perfectly, but the bottom reference always restarts at 1.

    Is there a way to either offset this list, or to code the footnote number into the reference?

    Thanks!

  12. admin says:

    If you look in the jpFootnotes.php, the code that creates the list is near the bottom (see below). If you want to change the ordered list to something else like paragraphs, just delete the ol tags a then replace the ‘<li id= … ‘ with ‘<p id=… ‘. Then hard code numbers into your footnotes like this [[1]] 1.this is my footnote. [[1]]. That just might work… you’ll just have to try it.

    // FOOTNOTE HEADING: html for the title of footer footnote section
    $data .= ”.$footnotes_title.’    (‘.$back_image.’ returns to text)’;

    // ACTUAL FOOTNOTE TEXT: html for footnotes in footer area
    foreach($foots_text as $foot_text){
    $data .= ”.trim($foot_text[0]).’‘.$back_image.’‘;
    }

    //append the final and close the
    $data .= ”;

  13. Jacob says:

    Thanks for the speedy reply! That’s a great workaround. I think I’ll use an unordered list instead, but the same concept applies.

  15. admin says:

    Looks like a z-index issue to me (conflicting with your template). If you size you’re page just so, you can see the edge appear back behind your page div. try upping the z-index in the footnote-voodoo.css to 100 or something. perhaps add z-index properties to some of the other footnote css elements as well.

  16. Aleksandrs says:

    Hey Lance,

    Nice job on the plugin! Lovin’ it 🙂

    Can you please advise, I am trying to use the HTML character instead of number for the footnote link.. Can’t seem to get it working. Is there a way?

    Thanks in advance!

  17. Aleksandrs says:

    I will not use neither the backlink, nor the Footnote list. I just need the hover text popping up.

    The ANSI character I am trying to use for the footnote link is ✔

    Please kindly assist.

  18. admin says:

    Im sorry, but currently you have to use numbers as the footnote reference marks or it wont work. The php code uses a regular expression to search for NUMBERS surrounded by brackets {{#}}. Perhaps one day I could change that, but I dont have time to take it on right now.

    If you would like to give it a stab, change this line in the php file “preg_match_all(“/\{\{[0-9]*\}\}/”, $data, $foots); “. You’ll just need to replace ‘[0-9]’ with a regular expression that finds your ansi character instead numbers 0-9. Or perhaps you should use a plugin like “Text Hover”? Note that the option in the backend is to easily change the ‘back link’ to be any ansi character you wish…. NOT the footnote reference mark.

  19. Aleksandrs says:

    Thanks so much for your help, appreciate it!

    I have modified the php file appropriately, and tried my first footnote, it worked perfectly!

    But then I added a few more (there are few references on the page with the ✔) and it broke some of my code 🙁

    I am using some code in [brackets] so they just disappeared..

    Somehow I figured out I should add more brackets to my code like [[[[[[[[[, and in a weird way it works lol.

    Check it out right here: http://airtour.lv/ru/poezdki/kod-da-vinci

  20. admin says:

    If you refresh your browser in chrome, you will likely see its not working there either. Look at your code (especially the id= tag, the html for a footnote is now

    a class=”fn-ref-mark” href=”#footnote-%E2%9C%94″ id=”ref-footnote-✔”

    Thats not going to work, Im not sure how good with php you are, but you may be better off finding a different plugin. the php code uses the footnote number to number the ID tag. And the javascript uses that ID to find the text and put it in the pop up. You would need to set up a counter in the php code to assign a number to each footnote. I forgot about that issue in my previous suggestion. sorry about that.

    You would need to set up a counter in the for each loop and change
    $foot_num = trim($foot, ‘{}’);
    to $foot_num = counter

  21. Aleksandrs says:

    You know, I refreshed it in Chrome, it stays in tact.
    no footnotes in Firefox and IE though.

    Thanks for suggestions man, different plugin is not a solution, I’ve tried a whole bunch of them, including Text Hover. none of them suit me unfortunately, yours does! (but I wish more people used Chrome, lol)

    But what about the counter? there should be ; in the end, right? Anyway, it does not return any result..
    Now the footnotes turned into plain code, i.e. double brackets.

  22. admin says:

    The plugin isnt realy meant to do this… but if you ask nicely I’ll help you come up with a solution for your site……. accept my google talk invite and send me what you’ve done so far to the php code…. 🙂

  23. Mallot says:

    Is there any easy way to eliminate the (↵ returns to text) that appears besides the footnote list heading? Thanks

  24. Sean says:

    Came across this plug-in it is almost exactly what I am looking for, any suggestions or future for referencing the same footnote multiple times, I don’t see any way to support that based on how the foots_text array is built.

    Thanks again for the great plug-in!

  25. admin says:

    I think it you can reference the same footnote multiple times without problems. You just have to use the same reference note each time. For instance… Sentence one{{1}}. And again is sentence five {{1}}. And then at bottom

    [[1]] My footnote text should work in both above references[[1]].

  26. admin says:

    @ Mallot.
    yeah just search the jqFootnotes.php for the line below this comment….

    // FOOTNOTE HEADING: html for the title of footer footnote section
    // by using .= we just append it to the end of ‘the_content’
    // old: …

    and just delete this part “&nbsp &nbsp &nbsp (‘.$back_image.’ returns to text)” out of the line that starts with.. $data .=

  27. gigi says:

    Hi,
    i have a problem, i’m italian and my text contains ‘ ” è ò . If i add some footnotes, my article doesn’t show. If i look at code page my content is empty. Can those characters broke my content article?

  28. Scott says:

    Hi, this plug in is just what I want, thanks for all the effort!

    I am so close to getting it working except when I place the mouse over the footnote link the box appears but it blank with no text contained.

    I have double checked & triple checked but I can’t see what I have missed.

    Any tips you can give to get over this?

  29. Bart says:

    Hey. Thanks for this plugin! I have a refinement (bug?) request if you have time:

    I’m using a custom WordPress template, and the rollovers work as advertised, but I have an issue when my hompage displays more than one post on a single page: the plugin doesn’t recognise multiple [1] footnotes displayed in one page. For example, on a single post it works fine: http://bartkowalski.com/2011/03/things-that-do-not-displease-me/

    But when that same post appears on a page with another post that has a [1] footnote, it displays the more recent [1] footnote instead of the correct one: http://bartkowalski.com/ (scroll down to the bottom for the post in question).

    Is there a way to set a specific ID or reference for the footnote that links it to the actual individual post?

    Thanks, and great work so far!

  30. Adrian says:

    Really nice, thank you. My only question is how does a screenreader interpret the footnote reference? Is there a way to have/does the plugin have a way to indicate that a footnote exists? Sorry, I temporarily don’t have access to JAWS or similar to test, hence the question.

    Best solution I’ve found though, I’ll be using it.

    Adrian

  31. Mallot says:

    Thanks a lot, it worked! Great plugin! =)

    I have just one more question related to the popup window that appears when you put the mouse over the footnote. I have a plugin in the sidebar, where I can put the link to images, videos, etc. I currently have a video from youtube, and the thing is that when the popup window appears, part of it goes behind the video so the user cant read it completely. Is there any way to make the popup to go over the video? Thanks again!

  32. Dan S says:

    Lance,

    great plugin… Just a little question… It seems to behave a little oddly if I use the more tag in WP.

    I end up with a “read more” link where I have put the more tag, but then the footnotes list below that as well. Then below the footnotes list there is another “read more” link which is indented with the footnotes list.

    Is there any way to change this to perhaps not show the footnotes list after the more tag (i’m thinking when the post is one of many on a front page, I won’t want to show long footnotes lists until the user clicks to read a specific article.

    Thanks once again…

    Dan

  33. Vincent says:

    Great plugin !!!

    I am using it with hidden footnotes, just to benefit a pretty tooltips like glossary at post level.
    A possible improvement : be able per Post to decide to hide or show the footnote, not only for all post.

    I am also experiencing an issue when I make more than one reference to a footnote.
    Ex in HTML:
    [[1]]My Footnote[[1]]
    My Title
    A first reference {{1}} and a second reference {{1}} to the same footnote”

    When published, the post will be displayed with correct footnote reference but with 1 or more character from HTML, like this :
    2>My Title
    A first reference 1 and a second reference 1 to the same footnote

    If I add one line like below it works :
    [[1]]My Footnote[[1]]

    My Title
    A first reference {{1}} and a second reference {{1}} to the same footnote”

    But, when I edit the post in Visual, the line is removed, and the issue comes back.
    The other workaround is to repeat the footnote for each references :

    [[1]]1st Footnote[[1]]
    [[1]]1st Footnote[[1]]
    [[2]]2nd Footnote[[2]]
    [[3]]3rd Footnote[[3]]
    [[3]]3rd Footnote[[3]]

    My Title
    A first reference {{1}} and a second {{2}} reference {{1}} to the same {{3}} footnote {{3}}”

    Any idea ?

    Thanks

  34. Tim says:

    I too have problems referencing multiple footnotes correctly.

    For example:

    “When I have something{{1}} like this{{1}}.

    [[1]]Footnote[[1]]”

    I get two of the same post embedded into each other!

  35. Arthur J says:

    Lance,

    The footnote numbering does not go super or subscript and the link & hover functions do not work in Carrington Build by Crowd Favorite unless Line 262 in jqFootnotes.php is modified to reflect the following:

    add_filter(‘the_content’, ‘jqFootnotes’, 15, 1);

    After making the php edit all things seem to function OK, albeit I am still having super & subscript issues. This may simply be a matter of changing something in the CSS, which I will explore tomorrow.

    Acccording to the CF staff they recommend that plugins that modify the post-content run at or after 10 so that WP can modify the content first.

    Arthur

  36. Arthur J says:

    Lance,

    I was able to get the superscript to display by including the following in the style.css:

    * Footnote Superscript */
    .sup { vertical-align: 0.5em;
    font-size: 0.75em;
    }

    Then using a span class for each footnote # as in the following example:

    {{1}}

    This worked in IE, Firefox, Chrome & Safari for Windows. It did not work in Opera, but Opera does have a known issue.

    Arthur

  37. Peter says:

    Great plugin,

    Another suggestion to make things a little more user friendly would be to include a button in the visual editor (eg. wp-polls). That way you just have to insert the reference text and the plugin can insert the ref. no. with associted id and code as well as the reference at the bottom of the page.

    secondly, when editing a post and one inserts a new reference it would be nice if the plugin could automatically update the sequence somehow to avoid a ref sequence inside the post of 1, 2, 3 ,7, 4, etc

    maybe also a widget with the latest reference would be nice.

    All in all good work, but these refiniments would certainly take it to a class of its own.

  38. Bart says:

    I am sorry, but I might be a little thick here… took me a while to figure the usage out. Perhaps these instructions might help others.

    If you have the JQFootnotes set at default then to use it do the following:

    Where you want to insert a footnote add the footnote number via the HTML screen by using the code:
    {{1}}.

    That piece of code will show this (the bracketed numeral one) as a superscript [1]

    The actual footnote can be written anywhere. I choose to place them at the end of the post/page for neatness sake and ease in finding it easily in the HTML screen. But you can even place it right after the code for the footnote number – just add the following:
    Note the corresponding footnote numerical identifier is in double brackets.

    [[1]]This will be the text of the footnote numbered 1! [[1]]

    Again, if you left the default settings for the plugin, when you hover over the notation (the bracketed number [1]) you will see your footnote under the mouse. You can also click on the [1] and it will take you to the footnote at the bottom of the page.

    Be aware of one new problem with the latest WordPress though. When you click to go to the bottom of the page the footnote is overshadowed by the gray dashboard bar at the top of the page when logged in..

    Wonder if this thing could be made to leave a line or two visible above the actual footnote?

    Also, as referenced by other commentators, if you want to refer to the same footnote, unfortunately you have to do the same process and create a different footnote ID and footnote even though the text remains the same.

    Anyway, my two cents as a newbie.

  42. admin says:

    It may be conflicting with your blue letter bible plugin. I have also had that kind of behavior when I accidentally didnt add the double braces {{4}} correctly. Or had a footnote in brackets [[ ]] without a corresponding footnote number in brackets {{#}}

  43. David@Crown Point Chiropractor says:

    So Here is the goof I made! I had the {{1}} that was there but what I was doing was [[ footnote info ]] instead of [[1]] footnote info[[1]] LOL so It is all set now! Thanks for the quick reply and making me think a little bit! This is truly a God send and an amazing plugin!

    Blessings

    David

  44. Chad says:

    Superb plugin. I think I have found a debilitating bug though: I use EvoLve theme by Theme4Press, and when I use your plugin, the popup window seems to have white text with a white background, making the popup text essentially invisible (so unfortunately I can’t use the popup feature of this plugin until this is fixed). I’m assuming this is caused by the fact that the theme is “inverted” – dark background and light text is the default. Maybe your code could take a little more precise control of the light-text font. Either that or allow the user an “invert” option so that your plugin produces a dark background with light text.

    What would be really good is if you could give background color, font color, font size and font face customization options to the user (and perhaps border).

  45. Chad says:

    Sorry, can you please edit my previous post and replace “light-text font” with “dark-text font”? That’s what I meant to write.

  46. Simplictas says:

    thank you for this wonderful plugin – easy to use and good working! i have only one suggestion: i have a long text (45 pages, 102 footnotes) and want to publish it on a wordpress blog, not on ONE page, but seperated in 6 or more pages. on the 2nd page i begin the footnotes with {{19}}. it appears as the footnote [19] in the text, but at the end of the page (after »footnotes, ↵ returns to text«) this footnote got the number 1.
    i could change my footnotes, so they begin with [[1]] on every page, but i think it would be better, if the footnotes are identical in the web and in the printed text. is it possible?

  47. zsk says:

    Hey! I’m trying to install your plugin and having some difficulty. It has all installed correctly, but when I publish a post for a page, with {{1}} in the location for the footnote, and [[1]] footnote text[[1]] at the bottom of the post, the script is not turning the {{1}} into a link or a subscript. Nor does the hover work. When I view the source of the page, though, it does confirm that footnote-voodoo.js and footnote-voodoo.css are both being included. For some reason, it seems like the PHP isn’t running on the page. Have I installed it wrong or done something incorrectly?

    Thanks!
    zsk

  48. Christine says:

    Thanks for providing this plugin. There are other footnote plugins out there, but most are really ugly. I have a client that’s using this, and really liking it.

    I know Arthur J mentioned this already, but I would also like to suggest that you lower the priority of the content filter.

    The client that is using would like to have references to the footnotes in images captions. With the high priority you gave your filter, if they insert the reference in the caption, it ends up creating malformed shortcode for the caption, which then does not display as it should.

    Everything works great with the priority set so it runs after WordPress does the caption shortcode.

    It was an easy change, but I would like them to be able to make updates to your plugin in the future without breaking anything.

    Thanks again!

Trackbacks & Pingbacks

  1. 35 Useful jQuery based Wordpress Plugins You May Not Have Seen Before | DesignBeep says:
    June 12, 2011 at 1:01 pm

    […] Plugin Source […]

  2. Hover-iffic footnotes « Bart Kowalski says:
    March 7, 2011 at 9:35 pm

    […] is possible by way of this wordpress plugin, which is fantastic, but, as a designer I needed to muck with it so it suited my personal taste. […]

Newer Comments »

Comments are closed.