custom footnotes

jakob · 2025-04-12 17:56:39

I had a go at a possible solution for your specific case. Here’s a slightly simplified shortcode:

<txp:if_yield name="pos" value="top" trim>
<sup class="tooltip">
    <a href="#fn<txp:yield name="id" />" id="link-fn<txp:yield name="id" />"><txp:yield name="id" /></a> 
</sup>
</txp:if_yield>

<txp:if_yield name="pos" value="bottom">
<li id="fn<txp:yield name="id" />" class="footnote"<txp:if_yield name="lang"> lang="<txp:yield name="lang" />"</txp:if_yield>>
    <txp:yield escape="" />
    <span class="noprint">
        <a href="#link-fn<txp:yield name="id" />">&#8679;</a>
    </span>
</li>
</txp:if_yield>

with some slight modifications:

using id instead of no as in your desired example.
No need to make a variable of the footnote number, as you can use <txp:yield name="id" /> however often you want.
No txt attribute as you want the text to be the shortcode’s contained text.

You use it like this:

In your text, write this wherever you want to have a note:

<txp::note id="9" pos="top" />

At the bottom, then a series of corresponding footnotes:

<txp::note id="9" pos="bottom">Your footnote text</txp::note>

At the bottom of your page (it must come after your footnotes), add a script block with the following (you can make it more concise by leaving out the comments):

<script>
// Get all footnotes at the end of the page
const footnotes = document.querySelectorAll('li.footnote');

// If any exist, process them
if (footnotes) {
  footnotes.forEach(note => {
    // Clone the note to change its content without affecting the original
    const clonedNote = note.cloneNode(true);

    // Get the last anchor element in the cloned note
    const backLink = clonedNote.querySelector('a:last-of-type');

    // Extract the href attribute from the backlink
    const href = backLink.getAttribute('href');

    // Remove backlink from tooltip text
    backLink.remove();

    // Extract the tooltip text content (without the backlink)
    const tooltipText = clonedNote.textContent;

    // Use the href to find the inline footnote by its id
    const inlineFootnote = document.getElementById(href.replace('#', ''));

    // If the inline footnote exists
    if (inlineFootnote) {
      // Create a new span element
      const span = document.createElement('span');

      // Set the classes and text content of the span
      span.classList.add('tooltiptext', 'noprint');
      span.textContent = tooltipText;

      // Append the span after the inline footnote
      inlineFootnote.after(span);
    }
  });
}
</script>

The comments should explain it. This should equip your inline footnotes with the same tooltip markup you have at present, so your existing CSS should work as you have it.

jakob · 2025-04-12 18:08:12

You could simplify this further. Theoretically you don’t need pos="top" and pos="bottom" as you can use the else case. That way you could do:

<!-- inline -->
<txp::note id="9" />
<!-- bottom -->
<txp::note id="9" details>Your text</txp::note>

Theoretically, you could expand on this if you needed a shortform of the footnote to appear as the tooltip. Maybe something like:

<!-- bottom -->
<txp::note id="9" details tooltip="Your shorter tooltip">Your long footnote</txp::note>

That would translate to:

<li id="fn9" class="footnote" data-tooltip="Your shorter tooltip">Your long footnote</li>

(that’s not implemented in the above code (yet))

Pat64 · Yesterday 04:17:35

Based on Julian solution (without the need to prefix the short code call with a <ul> tag):

<txp:if_yield name="details">

	<txp:if_yield name="id" value="1"><ul></txp:if_yield>
	<li id="fn<txp:yield name="id" />" class="footnote"<txp:if_yield name="lang"> lang="<txp:yield name="lang" />"</txp:if_yield>>
	    <txp:yield escape="" />
	    <span class="noprint">
	        <a href="#link-fn<txp:yield name="id" />">&#8679;</a>
	    </span>
	</li>

<txp:else />

	<sup class="tooltip">
	    <a href="#fn<txp:yield name="id" />" id="link-fn<txp:yield name="id" />"><txp:yield name="id" /></a> 
	</sup>

</txp:if_yield>

<txp:if_yield name="final"></ul></txp:if_yield>

Note: this short code use a final attribute in order to add a closing </ul> tag.

My question: is there a way to know the last short code iteration process to add the last wrapping tag </ul> without the need of a special attribute?

colak · Yesterday 04:47:55

Thanks so much Julian. It’s getting there. The current issue is that the note is rendered in the top sup. Ideally, it should become visible on mouse over.

Edit: Hi Patrick, You were posting when I was replying to Julian. I’ll test your suggestion too.

Edit2: Here’s the text I’m experimenting on: www.neme.org/texts/leaps-of-faith

Last edited by colak (Yesterday 04:50:15)

Pat64 · Yesterday 05:07:31

@Yiannis: pretty cool!

My question (to Devs): is there a way to know the last short code iteration process to add the last wrapping tag </ul> without the need of a special attribute?

jakob · Yesterday 07:17:03

Pat64 wrote #339499:

Based on Julian solution (without the need to prefix the short code call with a <ul> tag):

Thanks, that’s exactly what I was thinking of. I just wasn‘t sure about how far to depart from Yiannis‘ existing markup so it remains backwards compatible.

colak wrote #339500:

Thanks so much Julian. It’s getting there. The current issue is that the note is rendered in the top sup. Ideally, it should become visible on mouse over.

Isn‘t that bit already handled by your existing CSS? The js above just recreates your previous markup so it should work with what you have. If your CSS is already there, maybe I got the markup wrong.

If you were planning on dumping your existing css, the js could do things differently and listen for a mouseover, then grab the relevant tooltip text in the moment and display using some form of tooltip.

colak · Yesterday 07:25:12

Pat64 wrote #339501:

@Yiannis: pretty cool!

My question (to Devs): is there a way to know the last short code iteration process to add the last wrapping tag </ul> without the need of a special attribute?

here’s an option which I expect that it would work if you add <txp::note id="9" details final>Your final footnote</txp::note>

<txp:if_yield name="details">

	<txp:if_yield name="id" value="1"><ul></txp:if_yield>
	<li id="fn<txp:yield name="id" />" class="footnote"<txp:if_yield name="lang"> lang="<txp:yield name="lang" />"</txp:if_yield>>
	    <txp:yield escape="" />
	    <span class="noprint">
	        <a href="#link-fn<txp:yield name="id" />">&#8679;</a>
	    </span>
	</li><txp:if_yield name="final"></ul></txp:if_yield>

<txp:else />

	<sup class="tooltip">
	    <a href="#fn<txp:yield name="id" />" id="link-fn<txp:yield name="id" />"><txp:yield name="id" /></a> 
	</sup>

</txp:if_yield>

jakob · Yesterday 20:36:19

jakob wrote #339506:

Thanks, that’s exactly what I was thinking of. I just wasn‘t sure about how far to depart from Yiannis‘ existing markup so it remains backwards compatible.

Isn‘t that bit already handled by your existing CSS? The js above just recreates your previous markup so it should work with what you have. If your CSS is already there, maybe I got the markup wrong.

Ive taken a fresh look and, yes, I had a wrong class name in there. Please change this line in the javascript:

span.classList.add('tooltip', 'noprint');

to:

span.classList.add('tooltiptext', 'noprint');

('tooltiptext' instead of 'tooltip' … I’ve altered it in the earlier post already). Your existing CSS should then automatically cut in, and the footnote should show as a popup. Sorry about that.

colak wrote #339507:

here’s an option which I expect that it would work if you add <txp::note id="9" details final>Your final footnote</txp::note>

code...

Yes, that’s what Patrick was suggesting, however didn’t you originally say you wanted an ol list so that the footnotes are numbered?

Textpattern CMS

Textpattern CMS support forum

#13 2025-04-12 17:56:39

Re: custom footnotes

#14 2025-04-12 18:08:12

Re: custom footnotes

#15 Yesterday 04:17:35

Re: custom footnotes

#16 Yesterday 04:47:55

Re: custom footnotes

#17 Yesterday 05:07:31

Re: custom footnotes

#18 Yesterday 07:17:03

Re: custom footnotes

Pat64 wrote #339499:

colak wrote #339500:

#19 Yesterday 07:25:12

Re: custom footnotes

Pat64 wrote #339501:

#20 Yesterday 20:36:19

Re: custom footnotes

jakob wrote #339506:

colak wrote #339507:

Board footer