JSFiddle - React, Tailwind, and code Playground

by Anton Kolesnikov

HTML

<img class="img-tooltip" src="http://oi56.tinypic.com/2lkfhvb.jpg" />
<br />
<img class="img-tooltip" src="http://lotosangel.ucoz.com/_ph/8/2/958509515.jpg" />

CSS

body {
    position: relative;
    padding: 10px;
}
.img-tooltip {
    width: 50px;
    position: relative;
}
#tooltip {
    position: absolute;
    width: 100px;
    top: 0;
    left: 0;
    display: none;
}
#tooltip img {
    max-width: 250px;
}

JavaScript

$(document).ready(

function () {
    $("body").append("<div id='tooltip'>There is tooltip</div>");
    $(".img-tooltip")
        .on("mouseenter", function () {
            var there = $(this);
            $("#tooltip")
            .html("<img src=" + there.attr('src') + ">")
            .css( {"top" : there.position().top + "px",
                   "left": there.position().left + there.width() + 10 + "px",
                  })
            .show();
        })
        .on("mouseleave", function() {
            $("#tooltip").hide();
        })
});