Since from some days i'm trying to figure out how to implement a popover for footnotes in some on line pages. Me and some friends are developing a new website with octoberCMS, an amazing cms built on top of laravel.
We have generated a ton of pages, chapters from a book, and imported in html to our site. We used this script to transfrom file from doc to html, and with some modifies works like a charm.
But we have formatted the footnotes: like this <a class="footnote" href="#footnote1">(1)</a> without using the <sup> tag.
I tried to use bigfoot.js to achive my task without success, also trying to set the params i can't intercept correct html in the dom.
These are the differences: bigfoot.js format
<sup id="fnref:1"><a href="#fn:1" rel="footnote">(1)</a></sup>
<div class="footnotes">
<ol>
<li class="footnote" id="fn:1">
<p>Cake topping jelly-o caramels.<a href="#fnref:1" title="return to article"> ↩</a><p>
</li>
My format
<a class="footnote" href="#footnote1">(1)</a>
<h2>Notes</h2>
<p class="footnoteContent" id="footnote1">
Now i don't know which way to follow:
Try to change my markup via find and replace with notepad++. But can't figure out how to automatic change all my reference from <a class="footnote" href="#footnote1">(1)</a> to <sup id="fnref:1"><a href="#fn:1" rel="footnote">(1)</a></sup>
Or using a jquery function to intercept all a with class footnote and append them to a popover. Using, for example, the bootstrap built-in popover function or something similar.
Have suggestions?
Bye
