JSFiddle - React, Tailwind, and code Playground

by Apeksha Shah

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

.deleteClassDiv {
    display: inline-block;
    text-align: center;
    vertical-align: top;
}
.deleteClass {
    color: #FF0000 !important;
}
.PrimaryPhoto {
    display: inline;
    clear: both;
    padding: 5px;
}
.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;
}
textarea {
    font-family:"Calibri", Tahoma, Verdana, sans-serif;
}
.editControlsPanel {
    float: right;
    z-index: 100;
    display: inline-block;
    text-align: center;
}
.categoryLeftAlign {
    text-align: left !important;
    display: block;
}
.dialogBorder {
    border-width: 10px !important;
}
.selectControl {
    font-size: 80%;
    height: 1.8em;
    font-family:"Calibri", Tahoma, Verdana, sans-serif;
}
.EventField {
    margin-right: 3px;
    text-align: left;
    width: 100%;
    float: left;
}
.EventField .Title {
    font-weight: bold;
    float: left;
}
.EventField .Value {
    padding-left: 10px;
    position: static;
    float: left;
    max-width: 425px;
    /*AP Need a fixed width on this field to prevent parent column from growing*/
}
.EventField .LeftIndent {
    margin: 0px 0px 0px 25px;
}
.DataUnit {
    min-width: 200px;
}
#divPersonDetailsData .DataUnit {
    margin-top: 20px;
}
.GridCaption {
    border-bottom: solid 1px #222222;
    font-weight: bold;
}
#divImages {
    width: 800px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}
.imagesSubDiv {
    white-space: nowrap;
    display: inline-block;
}
#divImages img {
    height: 75px;
    padding: 5px;
    border: none;
}
.quickSearchTextPrompt {
    color: #999;
    font-style: italic;
}
.quickSearch {
    width: 100%;
    font-size: 0.8em !important;
    padding: 2px;
}
.divControl {
    -moz-border-radius: 3px;
   ...

JavaScript

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