JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ToolTipDIv" style="background-color: Yellow; display: none; width: 20%;">
        This is a text
    </div>
    <table class="style1" border="1">
        <tr>
            <td class="test">
                1
            </td>
            <td class="test">
                6
            </td>
        </tr>
        <tr>
            <td class="test">
                2
            </td>
            <td class="test">
                7
            </td>
        </tr>
        </table>

CSS

.style1{
width:100%;
}

JavaScript

$(function () {

            $(".test").bind("mouseenter", function (e) {
                $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY });
                $("#ToolTipDIv").show("slow");
            });
            $(".test").bind("mouseleave", function (e) {
                $("#ToolTipDIv").hide("slow");
            });
        });