<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@*" />
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="PopoverCtrl">
<h1>uib-popover</h1>
<button uib-popover-template="'popover.html'" popover-trigger="mouseenter" popover-placement="right">Popover</button>
<button uib-tooltip="Hello world" tooltip-trigger="mouseenter">Tooltip</button>
<my-directive>Custom Directive</my-directive>
</body>
</html>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('PopoverCtrl', function($scope) {
$scope.name = "Bob";
});
app.directive('myDirective', function() {
return {
restrict: 'EA',
transclude: true,
template: '<a href uib-popover-template="\'popover.html\'" popover-trigger="mouseenter" popover-placement="bottom" ng-transclude></a>'
//NB need to escape the single quote here ^ and here ^
};
});
/* Styles go here */
<h2>Popover heading</h2>
<p>Hello {{name}}</p>