JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<div class="popup" id="popuphover1" style="display:none; background-color: red; height: 250px; width: 300px;">test1</div>
<div class="popup" id="popuphover2" style="display:none">test2</div>
<br><br>
<span class="spanhover" id="hover1">Mouse over 1</span>
<br><br>
<span class="spanhover" id="hover2">Mouse over 2</span>

CSS

.spanhover {
    cursor: pointer;
}
.popup {
    position: absolute;
    display: none;
}
body {
    position: relative;
}

JavaScript

$(".spanhover").hover(function(event) {
    var divid = "#popup" + $(this).attr("id")
    $(divid).css({top: event.clientY, left: event.clientX}).show();
}, function() {
    var divid = "#popup" + $(this).attr("id")
    $(divid).hide();
});