JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/iamceege/tooltipster/master/js/jquery.tooltipster.js"></script>
<ul>
<li><a href="#" class="gettool tooltip" data-img="http://c.fsdn.com/allura/p/freefilesync/icon"><img src="/favicon.png" /></a>
</li>
<li><a href="#" class="gettool tooltip" data-img="http://c.fsdn.com/allura/p/freefilesync/icon"><img src="/favicon.png" /></a>
</li>
<li><a href="#" class="gettool tooltip" data-img="http://c.fsdn.com/allura/p/freefilesync/icon"><img src="/favicon.png" /></a>
</li>
</ul>
CSS
ul {
list-style-type:none;
margin:0;
padding:10px;
}
li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
JavaScript
$(document).ready(function () {
$(".gettool").hover(function () {
$(".tooltip").tooltipster('hide');
var imagetooltip = $(this).data("img");
console.log(imagetooltip);
var novaImagen = '<img src="' + imagetooltip + '" />'
$(this).tooltipster('content', novaImagen)
$(this).tooltipster('show');
});
var x = $(".tooltip").tooltipster({
animation: "grow",
contentAsHTML: true,
multiple: true
});
});