JSFiddle - React, Tailwind, and code Playground
HTML
<div id="images">
<li><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /><div class="tooltip">This is some tooltip! This is some tooltip! This is some tooltip! This is some tooltip! This is some tooltip!</div></li>
<li><div class="tooltip">This is some tooltip!</div><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /></li>
<li><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /></li>
<li><img src="http://i00.i.aliimg.com/photo/391346620/Cotton_Double_Faced_Fabric_50x50_v0.summ.jpg" /></li>
</div>
<div class="tooltip" id="calc"></div>
CSS
#images {
margin-top: 100px;
}
#images li {
list-style: none;
margin-left: 10px;
position: relative;
float: left
}
.tooltip {
color: #FFF;
clear: both;
float: none;
width: auto;
background: #000;
padding: 10px;
font: 11px Arial, Helvetica, sans-serif;
-moz-border-radius: 5px;
position: absolute;
top: -60px;
display: none;
border: 2px solid #999;
}
#calc{
top:-800px;
left:-300px;
}
JavaScript
$(".tooltip","#images").each(function(){
$("#calc").text($(this).text());
$(this).width($("#calc").width());
});
$('#images li').hover(function() {
$(this).find('.tooltip').show();
}, function() {
$('.tooltip').hide();
});