Add title attribute with footnote content to link leading to the footnote

[remarcable]

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

The UX of using footnotes is often distracting – you click on a link that takes you to the bottom of the page, and then you click the "back" character to get back. Often, I'm losing the place where I originally left off.

Solution

It would be great to be able to hover the footnote and have an overlay show the contents of the footnote. E.g. like this:

Here, I manually changed the HTML of the <a> tag to have a title attribute with the contents of the footnote.

Alternatives

I think adding footnotes as titles would be sensible, as it is very unobtrusive. Only users looking for this will actually be impacted, adding lots of Capital-D Delight to the footnotes.

(I'm not exactly sure if this is the right package to add this as an issue. I'm using remark with the remark-gfm plugin that seems to be using this package.)

[wooorm]

Hey!

Title doesn’t work with touch devices and can’t contain HTML. AFAIK all accessibility guidelines really strongly recommend against using it for such important content. I’m not sure this is a good idea.

---

This micromark project here deals with parsing footnotes.
It has a simple HTML compilation part too, but that’s only if you use micromark directly.
With unified/remark/rehype, we use ASTs. There’s an entire ecosystem where you can do whatever you want with ASTs.

Markdown footnote constructs are turned into HTML elements ion remark-rehype.
Please take 10 minutes to read over the readme there: https://github.com/remarkjs/remark-rehype. There are many options to affect the generated HTML.

After that plugin, you can (in the rehype ecosystem, working on hast ASTs), transform the HTML to your heart’s desire.

What I personally would recommend if you want to improve the footnote experience for readers, is to use client side javascript to look for all a[data-footnote-ref], and then for each anchor replace it with a sort of <details> element containing the corresponding footnote definition, that people can click/tap on to expand.

[wooorm]

Marking as a Q because it’s not something for here, and still a bit vague what the good way to go about it is

[remarcable]

Thank you for the fast responses! I found this genuinely helpful.

I think what I wanted to suggest was adding the title attribute in addition to how footnotes are currently displayed in the HTML. Think more of a progressive improvement for footnotes on desktop, without hurting anyone else who is on mobile, instead of removing footnotes altogether.

I'll continue exploring how to transform the hast, thanks for the suggestion.