<!DOCTYPE html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>ui-bootstrap Plunker (tooltip)</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="http://code.angularjs.org/1.4.5/angular.js"></script>
<script src="http://code.angularjs.org/1.4.5/angular-route.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="script.js"></script>
<!--
The tooltips are shown on correct position when Bootstrap version <=3.3.4.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
-->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-view=""></div>
</body>
</html>
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainCtrl',
templateUrl: 'vendor.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('MainCtrl', function($scope) {
$scope.vendors = [
{ id: 0, name: "IBM", products: [ 0, 1, 2 ] },
{ id: 1, name: "HP", products: [ 0, 1, 2, 3, 4 ] },
{ id: 2, name: "Sony", products: [ 0, 1 ] }
];
});
/* Styles go here */
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Vendors</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Products</th>
<th class="col-md-1"><span class="sr-only">Filter, edit or remove</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="v in vendors">
<td>
<span ng-bind="v.name"></span>
</td>
<td>
<span class="badge" ng-bind="v.products.length"></span>
</td>
<td class="vendor-crud" nowrap>
<a href="">
<span tooltip="Show products from this vendor">R</span>
</a>
<a href="">
<span tooltip="Edit vendor">U</span>
</a>
<a href="">
<span tooltip="Remove vendor">D</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>