How to add title/tooltip with footnote content to footnote link?

support
1

I’d like to add the title attribute to footnotes to make the content accessible on hover.

I.e. at the moment

footnote.[^bla]

[bla]: I am the text of the footnote

Will give

 <p>footnote.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup</p>

<li id="fn:1" role="doc-endnote">
<p>I am the text of the footnote <a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>

And I’d like to get

 <p>footnote.<sup  id="fnref:1"><a title="I am the text of the footnote" href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup</p>

<li id="fn:1" role="doc-endnote">
<p>I am the text of the footnote <a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>

Ideally I’d like to not have to use a JS script. Now, I don’t know how to write a Goldmark extension, and if I found one, how would I use it in a website. I’m a bit stuck and would appreciate ideas. :slightly_smiling_face:

2 Likes
2

Maybe what I’d need is a Markdown render hook for footnotes?

For context, a Markdown render hook for headers was just added to Hugo: GitHub discussion

3

No: https://github.com/gohugoio/hugo/issues/7291#issuecomment-630621888

4

Just to float my ideas and why I don’t think they work:

  1. {{ .Content | replaceRE <some hardcore regex >}}: This is the approach taken by the initial implementation of what is now done with the render-headings render hook. Since .Content is already converted to HTML at that stage (I think), that would need some hardcore regexing from what I can tell, so that’s maybe not feasible. You would probably at least need to “loop” across footnotes, right?

  2. Instead of writing [^footnote] and later [^footnote]: Some footnote text, one might use a custom shortcode {{< fn "Some footnote text" >}} that returns the desired structure with title= inline – but that would be uncomfortable to write, as it would have to be at the exact place where the footnote label is supposed to go. For longer footnotes, that’s even worse. And at that point I haven’t even figured out how to still add the footnote to the doc-endnote list at the bottom :tired_face:

Besides doing this in JS after the fact, I can’t think of any feasible solution that works either within the page itself (like a shortcode) or the template level (working with .Content somehow).

The more I think about it, the more I appreciate what littlefoot.js does for me – but then again, getting away without the extra JS would be nice. This feels like such a minor tweak (“just add the title= bit!”).

Maybe it’s worth asking on goldmark about the possibility of an alternative footnote format? I mean, this could be considered an accessibility feature, right? That would at least make it more attractive to consider than “It would be neat for arbitrary reasons”, but I’m starting to ramble.

1 Like
5

Thanks for writing this up!!

I am still a bit nervous about asking in Goldmark especially as they say " goldmark is not dedicated for Hugo . If you are Hugo user and your issue was raised by your experience in Hugo, you should consider create issue at Hugo repository at first ." and I’m still not 100% I’ve exhausted all possible Hugo solutions (although your write-up makes me think I have!)

6

Ahh, okay, so the long game would be to get this into the CommonMark spec!

(I’m kidding – I’m starting to think “just use littlefoot / other JS” is the most feasible solution)

2 Likes
7

I’m also curious about this. Reading the Goldmark README, I discover that it uses as a built-in extension PHP Markdown Extra: Footnotes, and this project has a configuration to do just what you’d like to (and I do to): https://michelf.ca/projects/php-markdown/configuration/#markdown-extra (search for fn_link_title = "").

But I cannot figure out how to set this configuration in there: https://gohugo.io/getting-started/configuration-markup/#goldmark

2 Likes