custom footnotes

colak · 2025-04-13 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 (2025-04-13 04:50:15)

Pat64 · 2025-04-13 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 · 2025-04-13 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 · 2025-04-13 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 · 2025-04-13 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

#16 2025-04-13 04:47:55

Re: custom footnotes

#17 2025-04-13 05:07:31

Re: custom footnotes

#18 2025-04-13 07:17:03

Re: custom footnotes

Pat64 wrote #339499:

colak wrote #339500:

#19 2025-04-13 07:25:12

Re: custom footnotes

Pat64 wrote #339501:

#20 2025-04-13 20:36:19

Re: custom footnotes

jakob wrote #339506:

colak wrote #339507:

Board footer