JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<div class="showDiv">Show Container</div>
<div class="noEntrisPopup text-left" id="poj" style="display:none"> <b class="fs15">Number of Entries</b>

    <br>hsfdjsd kfs fjsdkfsd kjfskdfhsdkf sdkfsdkfshdkf sdfksjdhf ksjdfhksjdhf skdjfhsdkjf sjkdfhsjkf hs</div>
<div id="log"></div>

CSS

.noEntrisPopup {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #4face5;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
    color: #666;
    line-height: 18px;
    padding: 15px;
    position: absolute;
    width: 300px;
    z-index: 2;
}

JavaScript

$('document').ready(function () {
    $('.showDiv').mouseover(function () {
        $('.noEntrisPopup').show();
    });
});

$('.showDiv').on("mouseout", function (event) {
    var pageX = '';
    var pageY = '';
    $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
    $('.noEntrisPopup').css({
        "left": event.pageX,
            "top": event.pageY
    }).hide();

});