diff --git a/src/plugins/default/markbind-plugin-footnotes-popovers.js b/src/plugins/default/markbind-plugin-footnotes-popovers.js
index 339aeae18a..4d8a7172ee 100644
--- a/src/plugins/default/markbind-plugin-footnotes-popovers.js
+++ b/src/plugins/default/markbind-plugin-footnotes-popovers.js
@@ -1,4 +1,5 @@
 const cheerio = module.parent.require('cheerio');
+const { parseComponents } = require('../../lib/markbind/src/parsers/componentParser.js');
 
 module.exports = {
   postRender: (content) => {
@@ -17,6 +18,9 @@ module.exports = {
     $('#content-wrapper')
       .append($('hr.footnotes-sep'))
       .append($('section.footnotes').append(popoversHtml));
+    $('section.footnotes popover').each((index, popover) => {
+      parseComponents(popover);
+    });
     return $.html();
   },
 };
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index fc3e86df39..b0e4daac7d 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -646,27 +646,27 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
                 note.</p>
             </li>
           </ol>
-          <popover id="pop:footnote1">
-            <div slot="content">
+          <span id="pop:footnote1" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger">
+            <div data-mb-html-for="content">
               <p>Here is the footnote. Footnotes will appear at the bottom of the page.</p>
             </div>
-          </popover>
+          </span>
 
-          <popover id="pop:footnote2">
-            <div slot="content">
+          <span id="pop:footnote2" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger">
+            <div data-mb-html-for="content">
               <p>Here's one with multiple blocks.</p>
               <p>Subsequent paragraphs are indented to show that they
                 belong to the previous footnote.</p>
             </div>
-          </popover>
+          </span>
 
-          <popover id="pop:footnote3">
-            <div slot="content">
+          <span id="pop:footnote3" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger">
+            <div data-mb-html-for="content">
               <p>Inlines notes are easier to write, since
                 you don't have to pick an identifier and move down to type the
                 note.</p>
             </div>
-          </popover>
+          </span>
         </section>
       </div>