CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangular-ui-bootstrapangularjs-controller
sir_thursday
sir_thursday

Reputation: 5409

Customize AngularJS Bootstrap Tooltip

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.

Upvotes: 2

Views: 3984

Answers (2)

Shafqat
Shafqat

Reputation: 1166

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

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

Upvotes: 2

karuthan
karuthan

Reputation: 241

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'
        });
    }])

Upvotes: 10

Related Questions