JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<table>
    <tr>
        <td class="chartSection">Chart 1</td>
    </tr>
    <tr>
        <td class="chartSection">Chart 2</td>
    </tr>
    <tr>
        <td class="chartSection">Chart 3</td>
    </tr>
</table>

CSS

table {
    margin-top:100px;
    margin-left:200px;
}

.popover {
    min-width: 250px;
    max-width: 250px;
    width: 250px;
}

JavaScript

$('td.chartSection').each(function () {
    var $thisElem = $(this);
    $thisElem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $thisElem,
        delay: {
            hide: 500
        },
        content: ' '
    });
});

//After popup is shown, run this event
$('td.chartSection').on('shown.bs.popover', function () {
    var $largeChart = $(this).find('.popover .popover-content');

    //Insert some dummy content
    $largeChart.html("dfjhgqrgf regqef  f wrgb wrbgqwtgtrg <br /> wfghjqerghqreg fbvwqbtwfbvfgb <br />efgwetrg");
});