JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<p>Lorem ipsum ador abmium abset.<br />
    The quick brown fox <a href="#" class="hasTooltip">jumped<span>Did he really jump, or was this fake?<br />I'm not sure. Do some research on this later.</span></a> hastily over the obese, lazy <a href="#" class="hasTooltip">dog<span>Lo</span></a>.
</p>

CSS

.hasTooltip {
    position:relative;
}
.hasTooltip span {
    display:none;
}

.hasTooltip:hover span {
    display:inline-block;
    background-color:black;
    border-radius:5px;
    color:white;
    box-shadow:1px 1px 3px gray;
    position:absolute;
    padding:5px;
    top:1.3em;
    left:0px;
    max-height:250px;
    
}