Footnotes

This page demonstrates the footnote shortcode, which creates inline info icons that reveal additional content when clicked.

Basic Usage #

Here’s a sentence with a footnote at the end.The text continues normally after the footnote icon.

You can also place footnotes in the middleof a sentence without breaking the flow.

With Custom Titles #

The footnote shortcode accepts an optional title parameter:

This fact might surprise youand change how you think about debugging.

Multiple Footnotes #

A paragraph can have multiple footnotesscattered throughout the textto provide context without cluttering the main content.

Footnotes with Markdown Content #

The footnote content supports markdown formatting:

Learn more about this topicin the resources section.

Use Cases #

Footnotes are perfect for:

1. Definitions - Explain technical termswithout interrupting the flow.
2. Citations - Reference sourcesinline.
3. Asides - Add commentarythat some readers might want to skip.
4. Clarifications - Provide additional contextfor edge cases.

Accessibility #

The footnote uses proper ARIA attributes and keyboard navigation:

• Click the icon to open the dropdown
• Click elsewhere to close it
• The tabindex attributes ensure keyboard accessibility
• Screen readers will announce the tooltip title