Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<table>
   <tr>
      <td><input id="client-id" type="text"/></td>
      <td><input id="client-name" type="text" tabindex="0" 
        data-trigger="hover" 
        data-placement="top" 
        data-toggle="popover" 
        data-trigger="manual" 
        data-content="this is a popover"/></td>
   </tr>
   <tr>
      <td><input id="test-id" type="text"/></td>
      <td><input id="test-name" type="text" tabindex="0" 
        data-trigger="hover" 
        data-placement="top" 
        data-toggle="popover" 
        data-trigger="manual" 
        data-content="this is another popover"/></td>
   </tr>
   <tr>
      <td><input id="abc-id" type="text"/></td>
      <td><input id="abc-name" type="text" tabindex="0" 
        data-trigger="hover" 
        data-placement="top" 
        data-toggle="popover" 
        data-trigger="manual" 
        data-content="this is abc's popover"/></td>
   </tr>    
</table>

CSS

body {
    padding: 100px;
}

JavaScript

$('[id$="-id"], [id$="-name"]').mouseover(function() {
    var id='#'+$(this).attr('id').split('-')[0]+'-name';
    $(id).popover('show');
});    
$('[id$="-id"], [id$="-name"]').mouseleave(function(e) {
    var label = $(this).attr('id').split('-')[0],
        id=$(e.relatedTarget).attr('id');
    if (id!=label+'-name' && id!=label+'-id') $('#'+label+'-name').popover('hide');
});