How to Display Footnotes on Hover Without JavaScript

Adding footnotes to your blog posts in Markdown is fairly trivial:

"This would be a great spot for a footnote."[^1]

[...]

## Footnotes

[^1]: Check out this awesome footnote! Clicking on the return arrow will send you back up the page, so you can continue reading the rest of the post. 

In practice, it works like this: “This would be a great spot for a footnote.”¹

If you clicked on that superscript, you would have jumped to the bottom of the page to read the footnote contents, then clicked the return arrow to get back up here. As I’m sure you can imagine, jumping back and forth like that has the potential to get a little annoying for your readers, especially if your posts are chock-full of footnotes.

Now … what if I told you that it’s incredibly easy to create footnotes that appear directly beneath a sentence on mouse hover? That these footnotes still function normally for mobile visitors and people using screen readers? And that you can accomplish this little trick with CSS and HTML alone? That would be pretty awesome, right?²Right! Look at how much more intuitive this is; your readers don’t have to go bouncing all over the page anymore when they want to read your footnotes! That said – and this is important – they still can use the superscript link to read the footnote at the bottom of the page if they really want to, or if they aren’t using a mouse (e.g. on mobile). Go ahead, click that superscript “2” to see what I’m talking about.

If you want to learn how to do this on your own blog, this tutorial is for you.

First thing you’ll need to do is add some CSS to your stylesheet:

/* Hide your footnote */

.hidden {
  display: none;
}

/* Reveal your footnote when hovering over an adjacent superscript */

sup {
  &:hover +.hidden {
    display: block;
    position: absolute;
    font-size: 1rem;
    background: #f8f8f8;
    border-radius: 0.3rem;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    max-width: 700px;
    margin-left: 3.5rem;
    padding: 1rem;
    z-index: 2;
  }
}

The only non-negotiables above are display: block and position: absolute; everything else can be modified to suit your own theme and preferences.³ And even in saying that, re: the non-negotiables … I suppose you could also use something like position: fixed; and top: 0; or bottom: 0; if you want your footnote to appear at the top or bottom of the screen, but I personally prefer revealing it directly beneath the footnote link itself. It’s just easier for the reader.

Once your CSS is in place, simply add in the following HTML for each footnote:

Here's your footnote.[^1] <span class="hidden" aria-hidden="true">Footnote text goes here</span> The rest of your post goes here.

## Footnotes
[^1]: Footnote text goes here.

And that’s it! Easy! span class="hidden" ensures that your inline footnote text remains hidden from view when your readers aren’t hovering over the adjacent superscript with their mouse, and aria-hidden="true" ensures that people who use screen readers won’t have to sit through a long-winded footnote in the middle of a sentence. People using screen readers can still jump to a footnote at the bottom of the page when they want to read it, as per usual.

Since we’re using the next sibling combinator to reveal the footnote, please remember to place your <span class="hidden"> immediately after your footnote superscript; if you place it ahead of the superscript (or anywhere else), nothing will happen on mouse hover.

I hope that my fellow #noJS people out there will find this helpful. I haven’t been able to find a single tutorial out there for displaying footnotes on mouse hover that doesn’t involve JavaScript,⁴ That doesn’t mean one doesn’t exist, of course. Search engines just get crappier and crappier…so I’m glad to be able to provide an alternative that works almost as well.

What’s especially cool about this trick is that you can adapt it to other useful purposes. What if you’re writing a highly technical blog post, for instance, and you want to reveal a definition for a particular termA word with a certain meaning on hover? You can do that with some minor modifications! Neat!

Have fun with it, and always remember: JavaScript is seldom a hard and fast requirement for advanced blogging features these days. If you have any questions, feel free to reach out.

Footnotes