Customize AngularJS Bootstrap Tooltip

Question

How do I add custom placements/animations to an AngularJS/Bootstrap tooltip? I can do:

myApp.controller('TooltipCtrl', function ($scope) {
  $scope.htmlTooltip = 'Here is a tooltip!';
});

And it works perfectly, but if I add:

$scope.setTriggers({
  placement: 'right'
});

inside the controller, I get an "undefined is not a function" error. What am I syntactically doing wrong?

EDIT:

I also tried doing this:

myApp.controller('TooltipCtrl', function ($scope) {
  $scope.placement = 'right';
  $scope.htmlTooltip = 'Here is a tooltip!';
});

but it seems to have no effect on the placement on the tooltip.

Answer 1

If you are trying to configure of the "$tooltipProvider".

$tooltipProvider is a provider hence configurable only in the CONFIG Phase of angular.

You will have to try it setting it in the CONFIG Phase of angular.

    angular.module('yourApp', ['ui.bootstrap'])
        .config(['$tooltipProvider', function ($tooltipProvider) {
        $tooltipProvider.options({
            placement: 'right'
        });
    }])

Answer 2

Angular $tooltipProvider has been changed to $uibTooltipProvider. Try this.

angular.module('yourApp', ['ui.bootstrap'])
.config(['$tooltipProvider', function ($uibTooltipProvider)
{
   $tooltipProvider.options({
   placement: 'right'
  });
}]);