<div class="fake-p">
  The most cited work in history, for example, is a 1951 paper<details name="footnote">
    <summary>1</summary>
    <div class="details-content">Lowry, O. H., Rosebrough, N. J., Farr, A. L. & Randall, R. J. J. Biol. Chem. 193, 265–275 (1951).</div>
  </details> describing an assay to determine the amount of protein in a solution.
</div>

<div class="fake-p">
  Sunlight poured like molten gold<details name="footnote">
    <summary>2</summary>
    <div class="details-content">Not precisely, of course. Trees didn’t burst into flame, people didn’t suddenly become very rich and extremely dead, and the seas didn’t flash into steam. A better simile, in fact, would be ‘not like molten gold.’</div>
  </details> across the sleeping landscape.
</div>

<div class="fake-p">
  My blog was recently featured in an academic paper<details name="footnote">
    <summary>3</summary>
    <div class="details-content"><span itemscope itemtype="http://schema.org/ScholarlyArticle"><span itemprop="citation"><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Eishita</span><span>, </span><span itemprop="givenName">Farjana Z.</span></span></span><span> & </span><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Stanley</span><span>, </span><span itemprop="givenName">Kevin G.</span></span></span><span> & </span><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Esquivel</span><span>, </span><span itemprop="givenName">Alain</span></span></span> <q><cite itemprop="headline">Quantifying the differential impact of sensor noise in augmented reality gaming input</cite></q> <span>(</span><time itemprop="datePublished" datetime="2015">2015</time><span>)</span> <span itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><span itemprop="name">Institute of Electrical and Electronics Engineers (IEEE)</span></span><span>.</span> DOI: <a itemprop="url" href="https://doi.org/10.1109/gem.2015.7377202">https://doi.org/10.1109/gem.2015.7377202</a></span></span></div>
  </details> which pleased me greatly.
</div>

details,
summary {
  display: inline;
  vertical-align: super;
  font-size: 0.75rem;
  padding: 0 0.25rem;
}
summary {
  cursor: pointer;
}
.details-content {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 1rem;
  font-size: 1rem;
  background: lightyellow;
  box-shadow: 0 0 100px black;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Details don't like being inside a p */
.fake-p {
  margin: 0 0 1rem 0;
}

body {
  font: 100%/1.4 system-ui;
  margin: 0;
  padding: 2rem 2rem 20rem 2rem;
}

// https://codepen.io/team/css-tricks/pen/jOMZewP
// Simply adding a [name] attribute to support closing one <details> when another is opened.