JSFiddle - React, Tailwind, and code Playground

HTML

<p>
 <span id="edtxt.trans1" class="tei l">My hope is in a bishop,
 <!--link to a reference -->
<div style="display:inline-block">
  <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>
     
<span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>
</div>

  </span><br>
  <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>
  <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>
  <span id="trans4" class="tei l">there is a gold symbol in his sign.
    <!-- likn to ref -->
      <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">2</a>
        <span class="ktooltiptext" onclick="return false;"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span> three <span style="color: green;">girls</span>
        </span>
   </span><br>
   </p>

CSS

/*added a text indent to overide indent styles further down*/
.ktooltip {
    display: inline-block;
    text-indent:0em;
}

.ktooltiptext, .ktooltiptext {
display: none;
    width: calc(100vw - 35px);
    background: #fff;
    border-radius: 6px;
    padding: 5px 5px;
    left: 10px;
    border: 2px solid grey;
    line-height: normal;
    text-decoration: none;
    position: absolute;
    z-index: 1;

}

p {display:inline-block}

.ktooltip:hover + span {
    display: block;
}