2

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.

sir_thursday
  • 5,270
  • 12
  • 64
  • 118

2 Answers2

10

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'
        });
    }])
karuthan
  • 241
  • 3
  • 6
  • Syntactically what you just posted is incorrect.. you have an extra bracket and stuff. Also why are you using `=` instead of `:`? It says on the Angular BootStrap UI to use the line `placement: 'right'`, I'm just not sure how to incorporate it into the controller. – sir_thursday Jun 09 '14 at 19:28
  • See http://stackoverflow.com/questions/19730461/hide-angular-ui-tooltip-on-custom-event. Do I have to add something to my routes.js? – sir_thursday Jun 09 '14 at 19:31
  • 1
    @Hubrid `$tooltipProvider.options` sets the *default* for tooltips. From your question, it sounds like you're looking for "custom *placements*" (emphasis is mine), meaning not the defaults but config for individual tooltips. Is that me just misunderstanding your wording? – Marc Kline Jun 09 '14 at 19:40
  • I see that you've changed it, but you have in such a way that sets the *defaults* for tooltips. What I'm asking the OP is whether this is truly what they want, because their original question is ambiguous but seems to indicate that it's not. – Marc Kline Jun 09 '14 at 19:52
  • Either way works. I meant individual tooltips originally, but I think all of my tooltips will have the same right placement, so it doesn't matter practically. That being said, I'm still interested in how you would set individual defaults. – sir_thursday Jun 09 '14 at 19:59
2

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

angular.module('yourApp', ['ui.bootstrap'])
.config(['$tooltipProvider', function ($uibTooltipProvider)
{
   $tooltipProvider.options({
   placement: 'right'
  });
}]);
sKhan
  • 9,694
  • 16
  • 55
  • 53
Shafqat
  • 1,104
  • 1
  • 11
  • 17