diff --git a/examples/tutorial.html b/examples/tutorial.html
index 1a00f4f..6d49865 100644
--- a/examples/tutorial.html
+++ b/examples/tutorial.html
@@ -149,12 +149,17 @@
     </dt-code>
   </dt-code>
 
-  <!-- <hr>
-  <h2>Footnotes</h2>
-  <p>This is a <dt-footnote ref="blah" /></p>
-  <dt-footnote-body ref="blah"></dt-footnote-body>
   <hr>
-  <h2>Math</h2> -->
+  <h2>Footnotes</h2>
+  <p>Just wrap the text you would like to show up in a footnote in a <dt-code>dt-fn</dt-code> tag. The number of the footnote will be automatically generated. <dt-fn>This text will be shown on hover.</dt-fn></p>
+    <dt-code block language="html">
+      &lt;dt-fn&gt;This will become a hoverable footnote.&lt;/dt-fn&gt;
+    </dt-code>
+  <dt-footnote-body ref="blah"></dt-footnote-body>
+  <!--
+  <hr>
+  <h2>Math</h2>
+   -->
   <hr>
   <h2>Layouts</h2>
   <p>The main text column is referred to as the body. It is the assumed layout of any direct descendents of the <code>dt-article</code> element.</p>