JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content-div">
<p>
Lorem ipsum dolor...
<a class="tooltip">
<img src="http://icons.iconarchive.com/icons/dryicons/simplistica/24/delete-icon.png" />
<span>Elimina(Delete)</span>
</a>
</p>
<p>
Lorem ipsum dolor...
<a class="tooltip">
<img src="http://icons.iconarchive.com/icons/dryicons/simplistica/24/delete-icon.png" />
<span>Elimina(Delete)</span>
</a>
</p>
<p>
Lorem ipsum dolor...
<a class="tooltip">
<img src="http://icons.iconarchive.com/icons/dryicons/simplistica/24/delete-icon.png" />
<span>Elimina(Delete)</span>
</a>
</p>
</div>
CSS
/* tooltip for buttons */
a.tooltip{position:relative; z-index:24;text-decoration:none}
a.tooltip:hover{z-index:25;}
a.tooltip span{display: none}
a.tooltip:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:1.1em; left:1.1em; width:10em;
border:1px solid #6e7044;
background-color:#feffe1; color:#6e7044;
text-align: center}
div.content-div{
height:100px;
width: 190px;
overflow-y:auto;
}
div.content-div p{
padding:5px;
}
span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
left:10.8em; width:10em;
border:1px solid #6e7044;
background-color:#feffe1; color:#6e7044;
text-align: center;
margin-top:0;
}
JavaScript
$('a').mouseover(function() {
$(this).parent().append('<span>Eliminate(Delete)</span>');
}).mouseleave(function() {
$(this).siblings('span').remove();
})