3 ms·
using <details> for popup-footnotes is a great idea! for anyone interested, here's a simple implementation (pure html+css): <style> details.footnote {
by uryga 6y ago
using <details> for popup-footnotes is a great idea! for anyone interested, here's a simple implementation (pure html+css):
<style>
details.footnote {
display: inline;
position: relative;
}
/* hide details arrow */
details.footnote > summary { list-style: none; } /* firefox */
details.footnote > summary::-webkit-details-marker { display: none; } /* webkit */
details.footnote > summary {
color: blue;
cursor: pointer;
}
details.footnote > .footnote-content {
position: absolute;
background: white;
border: 1px solid lightgray;
padding: 1em;
min-width: 40ch;
}
</style>
Lorem ipsum dolor sit amet
<details class="footnote">
<summary>[1]</summary>
<div class="footnote-content">This was once revealed to me in a dream.</div>
</details>
consectetur adipiscing elit, sed do<br>
eiusmod tempor. Ut enim ad minim veniam, quis nostrud exercitation<br>
ullamco laboris nisi ut aliquip ex ea commodo consequat.
edit: added webkit hack; thanks @timvdalen!
- timvdalen 6y agoHah, that's a nice application. You're missing a: details.footnote > summary::-webkit-details-marker { display:none; } For webkit, though!