JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
<div class="table-responsive">
<div class="row">
<div class="col-sm-12">

<table class="table">
<thead>
  <tr>
    <th>HEADING</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-placement="top" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button></td>
  </tr>
</tbody>
</table>

</div>
</div>
</div>

CSS

body {
  padding-top: 200px;
}

.table {
  width: 800px !important;
}

JavaScript

$(function() {
	$(document).popover({
  	selector: '[data-toggle=popover]',
    html: true,
    trigger: 'focus'
  });
});