SharePoint list item popovers on hover with AngularJS

Here’s how you can create Bootstrap style popovers of SharePoint list items using AngularJS.

<!DOCTYPE html>
<head>
<link rel=”stylesheet” href=”bootstrap.css” />
<link rel=”stylesheet” href=”font-awesome.css” />

<script type=”text/javascript” src=”modernizr.custom.js”></script>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”angular.min.js”></script>
<script type=”text/javascript” src=”bootstrap.js”></script>
<script type=”text/javascript” src=”ui-bootstrap-tpls.min.js”></script>

</head>
<body ng-app=”toolTips”>

<div ng-controller=”mainController”>
<table>
<tr ng-repeat=”faq in faqs” bs-popover>
<td>
<a href=”#” data-popover=”true” rel=”popover” data-content=”{{faq.Body}}” data-original-title=”{{faq.Title}}”>
{{faq.Title}}
</a>
</td>
</tr>
</table>
</div>

<script type=”text/javascript”>
var app = angular.module(‘toolTips’, [‘ui.bootstrap’]);
app.controller(‘mainController’, function($scope, $http, $sce) {

$http({
method: ‘GET’,
url: “/_api/web/lists/getByTitle(‘someList)/items?$orderby=Title asc”,
cache: true,
headers: { “Accept”: “application/json;odata=verbose” }
}).success(function (data, status, headers, config) {
$scope.faqs = data.d.results;
//$scope.trustAsHtml = $sce.trustAsHtml;
$(“#contentLoading”).hide();

}).error(function (data, status, headers, config) {

});

});

app.directive(‘bsPopover’, function() {
return function(scope, element, attrs) {
element.find(“a[rel=popover]”).popover({ placement: ‘bottom’, html: ‘true’});
};
});

$(‘body’).popover({ selector: ‘[data-popover]’, trigger: ‘click hover’, placement: ‘auto’, delay: {show: 50, hide: 2000}});
</script>

</body>
</html>