Custom bootstrap popover
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="table-responsive">
<table class="table table-striped table-hover table-responsive" id="example-table">
<thead>
<tr>
<th><a href="#" title="Test: 1, 2, 3">Make</a> </th>
<th><a href="#" title="Test: 4, 5, 6">Model</a> </th>
<th>Color </th>
<th>Year </th>
</tr>
</thead>
<tbody>
<tr>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
</tr>
<tr>
<td>Ford</td>
<td>Ranger</td>
<td>Blue</td>
<td>1990</td>
</tr>
<tr>
<td>Toyota</td>
<td>Tacoma</td>
<td>Red</td>
<td>2012</td>
</tr>
<tr>
<td>Ford</td>
<td>Mustang</td>
<td>Silver</td>
<td>2012</td>
</tr>
<tr>
<td>Mercury</td>
<td>Sable</td>
<td>Silver</td>
<td>2002</td>
</tr>
<tr>
<td>Toyota</td>
<td>Corolla</td>
<td>Blue</td>
<td>2012</td>
</tr>
</tbody>
</table>
</div>
CSS
a {
/* margin: 50px;*/
/* line-height: 8; */
}
JavaScript
$('a').popover({
container: 'body',
html: true,
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
content: function () {
$(this).attr('title', $(this).attr('data-original-title'));
return $(this).text();
},
placement: 'auto left'
});