JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<button id="ajax">Ajax Call!</button>
<table border="1">
    <tr>
        <td title="(Incomplete P/N, Wrong P/N, Invalid P/N, etc...)" data-info="PE" class="tips"><span id="grdNoGoods_ctl12_lblBuyerComments">Cancelled per PC</span>

        </td>
        <td title="test" class="tips" data-info="PC">John Black</td>
        <td title="test2" class="tips" data-info="PC">John Black</td>
    </tr>
</table>

CSS

.overlay {
                position: absolute;
                /*background-color: black;*/
                top: 274px;
                left: 4px;
                width: 100%;
                height: 1431px;
                opacity: 0.8;
                -moz-opacity: 0.5;
                filter: alpha(opacity=80);
                -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
                z-index: 10000;
            }
            .ui-tooltip {
                padding: 10px 20px;
                border-radius: 20px;
                font: bold 14px"Helvetica Neue", Sans-Serif;
                box-shadow: 0 0 7px black;
            }
            .ui-tooltip.PE {
                color: #E3E8F7;
                background: blue !important;
            }
            .ui-tooltip.PC {
                color: #212942;
                background: green;
            }

JavaScript

var setupTooltip = function (tooltippy_thing) {
    var style = tooltippy_thing.data('info');
    tooltippy_thing.tooltip({
        content: function () {
            return '<em>' + $(this).attr('title') + '</em>';
        },
        tooltipClass: style,
        show: "slideDown",
        open: function (event, ui) {
            ui.tooltip.hover(function () {
                $(this).fadeTo("slow", 0.5);
            });
        }
    });
};

$(function () {
    $('td.tips').each(function () {
        setupTooltip($(this));
    });
});

$('#ajax').on('click', function (e) {
    var ajax_html = $('<tr><td title="New tooltip 1" data-info="PC" class="tips">New Thing 1</td><td title="New tooltip 2" class="tips" data-info="PE">New Thing 2</td><td title="New tooltip 3" class="tips" data-info="PC">New Thing 3</td></tr>');
    
    $('table').html(ajax_html);
    ajax_html.find('td.tips').each(function() {
        setupTooltip($(this));
    });
});