Bootstrap UI Popover

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller='myCtrl'>
  
  <table>

<thead>
  <tr>
    <th>Name</th>
    <th>Address</th>
  </tr>
</thead>
<tr>
  <td> <div
    popover="{{careerAttribute.value}}"
    popover-append-to-body="true"
    popover-title="{{careerAttribute.title}}"
    popover-trigger="mouseenter"
    popover-placement="right">
    Hover for Popup
  </div></td>
  <td>India</td>
</tr>
<tr>
  <td> <div
    popover="{{careerAttribute.value}}"
    popover-append-to-body="true"
    popover-title="{{careerAttribute.title}}"
    popover-trigger="mouseenter"
    popover-placement="right">
    Hover for Popup
  </div></td>
  <td>India</td>
</tr>
</table>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js'></script>

CSS

[popover] {
  margin: 25px;
}

JavaScript

angular.module('myApp', ['ui.bootstrap']).controller('myCtrl',
	function ($scope) {
  	$scope.careerAttribute = {
    	'title': 'Here is The Title',
      'value': 'www.google.com'
    }
  });