Add tooltip when hovering over footnote numbers

[Bisaloo]

Many rOpenSci blog posts include a lot of footnotes. Currently, to read the footnote text, you have to click on the number, which brings you to the bottom of the page. To go back, you have to click "previous page" on your browser or scroll up but in both cases, you lose where you were in text and it disrupts the reading flow. It would be more convenient if the footnote text appeared in a tooltip when the reader hovers over the footnote number.

I have no idea how idea difficult this would be so feel free to close if that's too much of a hassle.

[maelle]

Interesting idea!

Just to be sure, to go back to the text you can click on the arrow at the end of the footnote too? Or doesn't this work for you?

[maelle]

Screenshot attached to clarify

[Bisaloo]

Oh yes, that's right. I missed this but I think I like it even less than clicking "previous" on your browser since it doesn't go back to the exact place you were before, and just put the line with the footnote number at the top of the page.

Interesting idea!

To add some context, I think I was expecting something of the sort because I've been used to journals allowing you to get the details of a reference without scrolling by clicking on it, as you can see on this example.

[Bisaloo]

This is pretty much what I had in mind: http://hiphoff.com/creating-hover-over-footnotes-with-bootstrap/

[maelle]

Thanks!

@jeroen mentioned we could maybe add footnote links at the Markdown rendering stage (rather than adding JS), I'm investigating how it could work.

Hugo forum topic

[maelle]

No answer on Hugo forum yet.

I read about littlefoot in this blog post

[maelle]

Maybe @jeroen's idea could work if there were a thing called a Markdown render hook for footnotes like the one there is for headers now https://github.com/gohugoio/hugo/issues/6713#event-3342223328

[maelle]

At the moment, we cannot use bookdown::bs4_book() strategy unless we use some sort of regex on the content which sounds dangerous.

[maelle]

This PR is interesting https://github.com/gohugoio/hugo/pull/7427 (but I'd still be in favor of using the JS library for now, as I'm not sure the PR will ever be merged)

[maelle]

The PR above was actually closed https://github.com/gohugoio/hugo/pull/7427#issuecomment-737186336 -- not sure what'll happen or not in Hugo reg footnotes.

Reg not using littlefoot see https://github.com/ropensci/roweb3/pull/97#issuecomment-740520636

[maelle]

@jeroen if we add JS for #483 maybe we could use an external library for this too :wink: