JSFiddle - React, Tailwind, and code Playground

HTML

Lorem<a href="#n1" name="r1" class="notes">[1]</a> ipsum dolor sit amet, consectetur adipiscing elit. Praesent at vestibulum turpis. Suspendisse interdum, purus fermentum eleifend dapibus, justo lacus egestas urna, eu semper purus lorem ut nisi. Duis porta porttitor imperdiet. Duis nec cursus sem. Donec quis erat ac nisi feugiat eleifend eu sed lacus.<a href="#n2" name="r2" class="notes">[2]</a> Nullam suscipit, nibh sit amet bibendum luctus, ante ante egestas leo, a finibus nibh metus congue metus. Nullam maximus ipsum non leo tempus pretium. Sed gravida, ligula et mattis gravida, neque leo bibendum arcu, ut egestas urna diam et lacus. Aliquam venenatis mi nec pretium vestibulum. Curabitur posuere eu sapien imperdiet volutpat.

<hr>
<pre>
Notes:
<a name="n1" href="#r1">1</a> Morbi nec lobortis.
<a name="n2" href="#r2">2</a> Suspendisse porttitor ligula diam. Fusce imperdiet enim congue, tincidunt urna id, consectetur nisl. Sed non lorem a sapien vestibulum venenatis.
<a name="n3" href="#r3">3</a> Aenean fermentum molestie sapien, vitae maximus tortor pulvinar feugiat. Sed sit amet posuere ipsum.
</pre>
<div id="tooltip" name="tt"></div>
<hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum rutrum arcu, eu vestibulum urna rhoncus eget. Phasellus blandit massa sed consequat imperdiet. Nam aliquam condimentum mi sit amet ultrices. Morbi laoreet lectus a diam efficitur, ut pharetra dolor auctor. Curabitur eget dolor quis turpis scelerisque fermentum ut eu leo. Nulla cursus justo non est rhoncus eleifend. Integer justo<a href="#n3" name="r3" class="notes">[3]</a> est, pulvinar fringilla eros eu, euismod porttitor leo. Nunc augue tellus, lobortis eget tristique et, efficitur vitae justo. Phasellus tincidunt tellus eget quam elementum consequat. Vestibulum sollicitudin ornare vulputate.
<hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum rutrum arcu, eu vestibulum urna rhoncus eget. Phasellus blandit massa sed consequat...

CSS

body {
  margin: 10px;
}

pre {
  white-space: pre-line;
  font-size: 13px;
}

.notes {
  font: 13px times;
  vertical-align: text-top;
}

#tooltip {
  position: absolute;
  max-width: 320px;
  left: -1000px;
  font-size: 14px;
  background: #e1e5f1;
  padding: 3px;
  border: 1px solid gray;
}

JavaScript

const toolTipHover=ev=>{
 const tt=document.getElementById("tooltip");
 if(ev.type=="mouseover") {
  if(ev.target.tagName=="A"){
   let href=ev.target.getAttribute("href");
   if (href.length>1 && href.slice(0,2)=="#n") { //  only for internal links ...
    let a=document.querySelector("[name="+href.substr(1)+"]")
    if (a) { // and only if these are actually found on the page
     tt.innerHTML=a.textContent+": "+a.nextSibling.textContent
     tt.style.left=Math.min(ev.pageX,window.innerWidth-tt.offsetWidth)+"px";
     tt.style.top = (ev.pageY+15 > window.pageYOffset+window.innerHeight-tt.offsetHeight 
       ? ev.pageY-tt.offsetHeight
       : ev.pageY+15)+"px";
     //tt.style.top=(ev.pageY+20)+"px";
    }
   }
  }
 } else { 
  tt.style.left="-1000px";  
 }
} 
["mouseover","mouseout"].map(ev=>document.body.addEventListener(ev,toolTipHover));