Footnotes and tooltips are a nice detail-information layer to add to your blog posts, articles, courses, and other content throughout your site.
Use Cases
Footnotes;
- Keep your references neatly together at the bottom of your article, with links directly within the content.
Tooltips;
- Popup a dictionary definition for a term
- Popup an information panel for e.g. a stock market symbol
A simple design approach
Implementing this assumes basic JS skills.
Sygnal's team has implemented a number of different footnote solutions, but we've not found a single solution that works for everyone.
Each client’s implementation requirements are different. Some want the footnotes as a scroll-to section. Some want a sidebar. Some want a tooltip or a popup. The indicators can be styled differently too.
But a basic footnotes feature is straightforward to build if you are familiar with basic JS.
Mike's Notes
The best approach I’ve found is to have two separate rich text fields in the CMS- one for the article content, one for the footnotes.
In both, I use the notation [n] to indicate footnotes, with n as any positive integer.
The script parses the blog content [n]'s into footnote indicators that you like, I often keep the brackets and the number, and link and superscript them. These are linked to #footnote-n.
It also parses the footnote content [n]'s similarly, usually presenting them as a bolded numeric indicator prefacing the footnote, which has the id footnote-n.
That’s the whole setup.
This lets you add as many footnotes as you want, and to repeat references like [36]. Using numbers also has the advantage that if JS is disabled in the browser, the user can still read and locate the correct footnote.
Note that it won’t warn you if you’ve created a footnote references that doesn’t exist, or about orphaned footnotes. Also the editing experience isn’t ideal since they’re completely separate.
But this is the simplest implementation.
There are a LOT of variations to this, but we generally recommend keeping it simple if you can.
Tooltips
https://atomiks.github.io/tippyjs/
Notes
https://discourse.webflow.com/t/interactive-footnotes-in-cms-blog-posts/257818/2
Alternate Approaches
These are not Webflow-specific tools, but might be adaptable with some additional work to work well with Webflow.
https://littlefoot.js.org/
https://github.com/lemonmade/bigfoot
Technical Notes
One prospective implementation
In-content references;
<p>This is some text.<aside><sup>1</sup> This is a footnote.</aside></p><p>This is some text.<details><summary><sup>1</sup></summary>This is a footnote.</details></p>This is some text.<sup><a href="#note1">1</a></sup><p>This is some text.<sup><a href="#fn1">1</a></sup></p><details id="fn1"> <summary>Footnote 1</summary> This is the content of the footnote.</details>
...
<ol>
<li id="note1"><a href="#ref1">^</a> This is a footnote.</li>
</ol>
A11y concerns
<p aria-describedby="footnote1">This is some text.<sup id="ref1"><a href="#note1">1</a></sup></p>
...
<div id="footnote1">This is a footnote.</div>
https://codepen.io/goblindegook/pen/oPNzGE?editors=1010
