JSFiddle - React, Tailwind, and code Playground

HTML

<table class="ui-widget-content resultsTable">
    <tbody>
        <tr class="ui-widget-header" align="center">
            <th><a href="#top" onclick="javascript:return orderBy('PreferredLastName', 'person');">Name</a>

            </th>
            <th><a href="#top" onclick="javascript:return orderBy('BirthDate', 'person');">Birth Date</a>

            </th>
            <th><a href="#top" onclick="javascript:return orderBy('BirthLocation', 'person');">Birth Location</a>

            </th>
            <th><a href="#top" onclick="javascript:return orderBy('DeathDate', 'person');">Death Date</a>

            </th>
            <th><a href="#top" onclick="javascript:return orderBy('DeathLocation', 'person');">Death Location</a>

            </th>
            <th><a href="#top" onclick="javascript:return orderBy('OtherNames', 'person');">Other Names</a>

            </th>
            <th style="min-width: 20px;"></th>
        </tr>
        <tr class="rowStyle personDetailsOnHover" onclick="javascript:return editPerson(-9999,296677);" personid="296677">
            <td>aaaaaaaaa, aaaaaaaa</td>
            <td style="white-space: nowrap;"></td>
            <td></td>
            <td style="white-space: nowrap;"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="alternatingRowStyle personDetailsOnHover" onclick="javascript:return editPerson(-9999,296676);" personid="296676">
            <td>eeeeeeeeee, eeeeeeeeee</td>
            <td style="white-space: nowrap;"></td>
            <td></td>
            <td style="white-space: nowrap;"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="rowStyle personDetailsOnHover" onclick="javascript:return editPerson(-9999,296678);" personid="296678">
            <td>smith, john</td>
            <td style="white-space: nowrap;"></td>
            <td></td>
            <td style="white-space: nowrap;"></td>
            <td></td>
  ...

CSS

.ui-widget-content .divControl input[type=checkbox] {
    margin-right: 5px;
}
.TitleClass {
    font-weight: bold;
    padding-left: 20px;
    display: inline-block;
    width: 150px;
    vertical-align: top;
    text-align: left;
}
.ValueClass {
    display: inline-block;
    min-width: 200px;
    vertical-align: top;
}
.selectControl {
    font-size: 80%;
    height: 1.8em;
    font-family:"Calibri", Tahoma, Verdana, sans-serif;
}

.DataUnit {
    min-width: 200px;
}
.bold {
    font-weight: bold;
    color: #2e5c29 !important;
}
.resultsTable {
    width: 100%;
    padding: 3px;
    border-width: 1px;
    border-style: outset;
    cursor: pointer;
}
.resultsTable td, .resultsTable th {
    border-spacing: 0px;
    padding: 3px;
    text-align: left;
}
/*Admin Service CSS*/
 
.rowStyle {
    background-color: Transparent !important;
}
.rowStyle:hover, .rowStyle:hover TD {
    background-color: #e5fce2 !important;
    /*color: #2e5c29;     border: solid 1px #2e5c29;*/
}
.alternatingRowStyle {
    background-color: #EEEEEE !important;
}
.alternatingRowStyle:hover, .alternatingRowStyle:hover TD {
    background-color: #e5fce2 !important;
    /*color: #2e5c29;     border: solid 1px #2e5c29;*/
}
.selectedRowStyle, .selectedRowStyle TD {
    border: solid 2px Gray;
    background-color: Gray;
}
/*!
 * jQuery UI CSS Framework 1.8.22
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
 .ui-helper-hidden {
    display: none;
}
.ui-helper-hidden-accessible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}
.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}
.ui-helper-clearfix:before,...

JavaScript

$(document).ready(function () {
    $(".personDetailsOnHover").tooltip({
        items: "tr",
        content: function () {
            return "loading";
        }
    });
});