var app = angular.module('myApp',['ui.bootstrap']);
app.config(['$tooltipProvider', function ($tooltipProvider) {
$tooltipProvider.options({
appendToBody: true, //
placement:'bottom' // Set Default Placement
});
}]);
app.controller('DemoTooltipCtrl', ['$scope', function($scope) {
$scope.toolTip1='Tooltip Top';
$scope.toolTip2='Tooltip Right';
$scope.toolTip3='Tooltip Html';
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Tooltip Demo</title>
<!--Bootstrap CSS-->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<!--AngularJS-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<!--UI Bootstrap-->
<script src="//angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="DemoTooltipCtrl" style="margin-left:24px">
<h2 style="color:purple">Angular Tooltip Sample</h2>
<button class="btn btn-default" tooltip="{{toolTip1}}" tooltip-placement="top">{{toolTip1}}</button>
<br />
<button class="btn btn-primary" tooltip="{{toolTip2}}" tooltip-placement="right" style="margin-top:24px">{{toolTip2}}</button>
<br />
<input class="form-control" tooltip-html-unsafe="Line 1<br />Line 2<br />Line 3" tooltip-placement="right" style="margin-top:24px" ng-model="toolTip3" />
<br />
<div class="btn-group" role="group" style="margin-top:24px">
<button type="button" data-tooltip-append-to-body="true" data-tooltip="Button1" class="btn btn-default">Btn1</button>
<button type="button" data-tooltip-append-to-body="true" data-tooltip="Button2" class="btn btn-primary" tooltip-placement="top">Btn2</button>
<button type="button" data-tooltip-append-to-body="true" data-tooltip="Button3" class="btn btn-danger">Btn3</button>
</div>
</div>
</body>
</html>