JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<p>
    <button type="button" id="addRow">Add another row</button>
</p>

<table class="table" id="myTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Country</th>
            <th>Statistics</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td >1</td>
            <td class="name">Name #1</td>
            <td>United States of America</td>
            <td>100%</td>
        </tr>
        <tr id="2">
            <td >2</td>
            <td class="name">Name #2</td>
            <td>United States of America</td>
            <td>100%</td>
        </tr>
    </tbody>
</table>

CSS

body {
    padding: 15px;
}

JavaScript

var table = $('#myTable');

$('#addRow').click(addRow);

var id = 3;
function addRow() {
    var cell = '<td>' + id + '</td>';
        cell += '<td class="name">Name #' + id + '</td>';
        cell += '<td>United States of America</td>';
        cell += '<td>100%</td>';
        
   table.append('<tr id="' + id +'">' + cell + '</tr>');
   id++;
}

// BS Tooltip
var tooltipOptions = {
    container: 'body',
    html: true,
    selector: 'td.name',
    trigger: 'manual',
    title: function() {
        // here will be custom template
        var id = $(this).parent().attr('id');
  
        return 'Tooltip for row #' + id;
    }
};

var tip;

table
.on('mouseenter focusin', 'tbody > tr', function() {
    tip = $(this).find('td.name');
    tip.tooltip(tooltipOptions);
    tip.tooltip('show');
})
.on('mouseleave focusout', 'tbody > tr', function() {
    tip.tooltip('hide');
});