JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Test</title>

</head>

<body>

<div>

    <div>

        <table cellspacing="0" rules="all" border="1" id="MainContent_grdTooltip" style="border-collapse: collapse;">

            <tr>

                <th scope="col">MainID</th>

                <th scope="col">SecondID</th>

                <th scope="col">CODE</th>

            </tr>

            <tr>

                <td>101</td>

                <td>999999991</td>

                <td onmouseover="showDiv(101,999999991)">55789</td>

            </tr>

        </table>

    </div>

    <div id="tooltip" class="tooltip">

        <table>

            <tr>

                <td>Main Id:</td>

                <td id="batch"></td>

            </tr>

            <tr>

                <td>Second Id:</td>

                <td id="vendor"></td>

            </tr>

        </table>

    </div>

</div>

</body>

</html>

CSS

.tooltip

    {

        background-color: Orange;

        position: absolute;

        border-style: solid;

        border-width: 2px;

        border-bottom: solid 2px black;

    }

JavaScript

window.showDiv = function(batchId, vendorId) {

                console.log("hi");

        tooltip.style.display = "block";

        batch.innerHTML = batchId;

        vendor.innerHTML = vendorId;

        $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

    }