I am an avid reader of The Magazine 1, and one of the first things you will notice when reading any issue is the clever handling of footnotes in their pieces. Commonly you will find these links to footnotes either inline or in the form of a tappable button with a symbol in it (in their case, a star) embedded throughout The Magazine’s thought-provoking paragraphs. Whenever you tapped one of these links, something kind of unique happened. Instead of being whisked away to the bottom of the page, the content of these footnotes would pop up instantly over the text in a modal window.
Read its contents. Tap anywhere outside of the modal. Done.
The popover disappears and you continue on with the article you were enjoying without having to tap a “scroll up” link or, worse, having to literally scroll back up to where you were previously.
I got used to this delightful bit of UI/UX rather quickly and instantly started searching for a way to implement the same effect into my own online prose.
Problem was, I couldn’t find anyone that was doing it. At least not at the time.
Still, after implementing it on thaddeushunt.com, I immediately thought that its implementation wasn’t terribly approachable for everyday users. Surely someone must have created a WordPress plugin for this. Maybe with some sort of shortcode for ease of use?
Well, it turns out that someone did that too.
And it doesn’t stop there either. Out of the box it looks pretty great, but if you have some chops with CSS you can even tweak the baked in style sheet to taste so that it better matches the aesthetic of your site! It’s also responsive, so it changes dynamically depending on what size screen it’s rendering on.2
[gallery type=“rectangular” ids=“7246,7245,7247”]
So if you’ve been looking for a better, more elegant and helpful way to add footnotes to your web-based content, I hope this post saves you some searching.