JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div title="regular tooltip">Hover me</div>
<br><br>
<a class="tooltip" href="http://www.google.com/">
    Google
    <span>
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>
<br /><br />

<a class="tooltip" href="http://www.google.com/">
    Another one
    <span>
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

CSS

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

JavaScript

$(document).on('mousemove', '.tooltip', function(event) {
    var x = (event.clientX + 20),
        y = (event.clientY + 20);
    
    $(this).children('span').css({top: y, left: x});
});