JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<ul class="gallery masonry">
<li class="item-wrapper">
<div class="item-content"></div>
</li>
<li class="item-wrapper a1">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Artist%27s_Conception_of_Space_Station_Freedom_-_GPN-2003-00092.jpg/400px-Artist%27s_Conception_of_Space_Station_Freedom_-_GPN-2003-00092.jpg"/>
<div class="tooltip">Blablabla tooltip</div>
</li>
<li class="item-wrapper a2">
<img src="http://www.revisemri.com/tools/kspace/images/k_remlines.jpg"/>
<div class="tooltip">Blablabla tooltip</div>
</li>
<li class="item-wrapper a1">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Artist%27s_Conception_of_Space_Station_Freedom_-_GPN-2003-00092.jpg/400px-Artist%27s_Conception_of_Space_Station_Freedom_-_GPN-2003-00092.jpg"/>
<div class="tooltip">Blablabla tooltip</div>
</li>
<li class="item-wrapper a2">
<img src="http://www.revisemri.com/tools/kspace/images/k_remlines.jpg"/>
<div class="tooltip">Blablabla tooltip</div>
</li>
<li class="item-wrapper a1">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Artist%27s_Conception_of_Space_Station_Freedom_-_GPN-2003-00092.jpg/400px-Artist%27s_Conception_of_Space_Station_Freedom_-_GPN-2003-00092.jpg"/>
<div class="tooltip">Blablabla tooltip</div>
</li>
<li class="item-wrapper a2">
<img src="http://www.revisemri.com/tools/kspace/images/k_remlines.jpg"/>
<div class="tooltip">Blablabla tooltip</div>
</li>
</ul>
CSS
ul {
list-style:none;
display:block;
padding:0;
}
.item-wrapper {
position:relative;
float:left;
margin-left:5px;
}
.tooltip {
width:100px;
height:auto;
position:absolute;
bottom:0;
left:0;
background:#ff0000;
display:none;
}
.item-wrapper:hover .tooltip {
display:block;
}
JavaScript
$(function(){
var $container = $('.gallery');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item-wrapper',
columnWidth: 5,
});
})
});