JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="container">
<table id="datatable" cellspacing="0">
        <thead>
            <tr>
              <th colspan="1" rowspan="1" class="right-pointing-label">Reference area <i class="icon-angle-right"></i></th>
              <th colspan="2" rowspan="1" class="horz-heading">Argentina</th>
              <th colspan="2" rowspan="1" class="horz-heading">Austria</th>
              <th colspan="2" rowspan="1" class="horz-heading">Australia</th>
              <th colspan="2" rowspan="1" class="horz-heading">Belgium</th>
              <th colspan="2" rowspan="1" class="horz-heading">Canada</th>
              <th colspan="2" rowspan="1" class="horz-heading">Chile</th>
              <th colspan="2" rowspan="1" class="horz-heading">China</th>
              <th colspan="2" rowspan="1" class="horz-heading">Chiddingfold</th>
              <th colspan="2" rowspan="1" class="horz-heading">Chessington</th>
              <th colspan="2" rowspan="1" class="horz-heading">Dartford</th>
              <th colspan="2" rowspan="1" class="horz-heading">Elephant & Castle</th>
              <th colspan="2" rowspan="1" class="horz-heading">Farnham</th>
              <th colspan="2" rowspan="1" class="horz-heading">Goat Town</th>
              <th colspan="2" rowspan="1" class="horz-heading">Harrods</th>
              <th colspan="2" rowspan="1" class="horz-heading">Ilford</th>
            </tr>
            <tr>
              <th colspan="1" rowspan="1" class="right-pointing-label">Sex <i class="icon-angle-right"></i></th>
              <th colspan="1" rowspan="2" class="horz-heading">Male</th>
              <th colspan="1" rowspan="2" class="horz-heading">Male</th>
              <th colspan="1" rowspan="2" class="horz-heading">Female</th>
              <th colspan="1"...

CSS

.container { width:600px; height:350px; overflow:auto; }

.metapop { cursor: pointer; }

.metapop:hover { background:yellow; }

.popover { min-width: 200px; }

th { border:1px solid; }
td { border:1px solid; }

JavaScript

$(".metapop").popover({	
		html: true,
		trigger: 'manual',
		placement: 'top',
		title: "You clicked on this cell:",
		content: 'hello this is a popover'
    }).click(function(e) {
            $('.popover').hide();
            $(this).popover('show');
        });