JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
    <a data-toggle="tooltip" href="javascript:;">Tooltip</a>
    
    <div id="tooltip-table" class="hide">
        <table class="table table-bordered" style="width: 300px;">
            <caption>Monthly savings</caption>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                 <td>February</td>
                 <td>$50</td>
             </tr>
        </table>
    </div>
</div>

CSS

.tooltip, .tooltip-inner {
    min-width: 320px !important;
    width: 320px !important;
}

JavaScript

$('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    html: true,
    title: $('#tooltip-table').html(),
    placement: 'right'
});