JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
<link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css">
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<ul class="container">
<li>
<div class="my-div">
<img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
</div>
<div class="active-hover">
<img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
<div>This is a Rabbit</div>
</div>
</li>
<li>
<div class="my-div">
<img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
</div>
<div class="active-hover">
<img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
<div>This is a Rabbit</div>
</div>
</li>
<li>
<div class="my-div">
<img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
</div>
<div class="active-hover">
<img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
<div>This is a Rabbit</div>
</div>
</li>
<li>
<div class="my-div">
<img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
</div>
<div class="active-hover">
<img src="http://icons.iconarchive.com/icons/joseph-aeron/us-fish-and-wildlife-service/128/rabbit-icon.png" />
...
CSS
.my-div img{width:140px}
li{list-style:none; float:left}
.active-hover{display:block;}
JavaScript
$(document).ready(function() {
$(".my-div").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function() {
return $($(this).next().html());
},
showURL: false
});
});