JSFiddle - React, Tailwind, and code Playground

HTML

<div style="overflow:scroll; width:80px; height:80px; z-index:5;">
<a href="#" class="tooltip">
an image
<span>some hidden tooltip which is a bit longer in here</span>
</a>
</div>

CSS

a.tooltip span 
{
z-index: 2000;
display:none;
position:fixed;
padding:0px 0px 2px 2px;
background:yellow; 
text-decoration:none;
vertical-align:top;
}

a.tooltip:hover span
{
display:inline; 
position:fixed;
padding:0px 0px 2px 2px;
top:0;
left:18px;
background:yellow; 
text-decoration:none;
vertical-align:top;
z-index:5;
}

a.tooltip 
{
border-width:0px; 
text-decoration:none;
}

a.tooltip:hover
{
border-width:0px; 
text-decoration:none;
position:relative;
}