Search code examples
htmlcssyamlquarto

In Quarto, how to hide footnotes from page footer?


I experiment with Quarto html and I would like to show some tips when hovering on some words on the page. However, I have many of such tips and I don't want them to be displayed in page footer, only when hovering the terms in the body of the document.

I did not find how to hide the footnotes from page footer. If necessary, I may hide the entire page footer if necessary. Since I have many termis with such tips, a solution relying on css and YAML options is preferred to a solution where hard-coded html is required for each tip.

Example .qmd :

---
format:
  html:
    footnotes-hover: true
---

The following footnote is available on hovering^[This footnote should only be displayed when hovering the text, not in page footer.]

Thank you !


Solution

  • You can hide the footnote section using CSS here.

    ---
    format:
      html:
        footnotes-hover: true
        css: style.css
    ---
    
    The following footnote is available on hovering^[This footnote should only be displayed when hovering the text, not in page footer.]
    

    style.css

    section#footnotes {
      display: none !important;
    }
    
    #quarto-appendix.default {
        border-top: none !important;
    }
    

    However, there's one little thing to note here. I have also removed the borderline that appears before the footnote section in the page footer. If you have citations or other attribution information as listed here, you may keep that borderline. In that case, just remove the following part from the css file,

    #quarto-appendix.default {
        border-top: none !important;
    }