Add "title" to footnotes

[CA Manas Madrecha]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

Currently, the footnotes are appended at the end of the page. Only way to view footnotes is to click the link and the long page scrolls down. And then, click the ↩ symbol again to go back. This is really tedious if a page has many footnotes.

What if I want to quickly glance a particular small footnote, without scrolling the page up and down every time?

Solution

Simply, add a "title" attribute to the link of the footnote.

E.g.,

Currently, the following markdown:

Chapter[^1]

[^1]: First footnote content here

Generates this HTML:

<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>

...More content...

<div class="footnotes">
<hr>
<ol>
<li id="fn-1">First footnote content here<a href="#fnref-1" class="footnote-backref">↩</a></li>
</ol>
</div>

But, rather, it would be great if it becomes like this:

<sup id="fnref-1"><a href="#fn-1" class="footnote-ref" title="First footnote content here">1</a></sup>

...More content...

<div class="footnotes">
<hr>
<ol>
<li id="fn-1">First footnote content here<a href="#fnref-1" class="footnote-backref">↩</a></li>
</ol>
</div>

---

1. A title attribute on the <a> tag with the text content of the footnote in the title would be make it really easy to just hover the mouse to view the "title" or add some pseudo CSS like :hover, ::before to view on mobile too.

2. If someone wants to view the whole footnote, one can still click on the click and scroll to the bottom of the page.

3. If someone wants to just see the text of the footnote, it can be viewed then and there itself by hovering on the little link, and no need to scroll again and again.

Alternatives

?

[Titus]

Hey!

• This plugin matches how GitHub generates footnotes. GH does not add titles. So this won’t happen
• You can create plugins (specifically, rehype plugins), to do this!

[CA Manas Madrecha]

@wooorm

If not in this plugin, then can the required change be brought in remark-footnotes plugin instead?

P.S. I thought of creating a simple rehype plugin to add the title attribute to the node, but this remark-gfm or the remark-footnotes plugins do not save the content of the footnotes in that node. It rather adds them at the end of the page. So, how do I get the footnotes' content?

Also, this plugin is very useful, so I cannot stop using it. So, it would be great if at least an option is given in the plugin options to add such a title in the link node itself.

[Titus]

No options. This is about GFM.

You can use two plugins. First this, for footnotes, and then a rehype plugin, to add titles. See https://unifiedjs.com/learn/ for more info