angular-ui bootstrap tooltip issue

Question

For some reason with the way we structured the page, the tooltip is not working.

main.html

<div class="main-navigation">
   <div rt-tool-menus-"menus" selected="selectedMenus" tooltip="{{appController.displayName}}"></div>
</div>

controller.js

angular.module('abc')
  .controller('abcController',.....

  self.menus=[
      {
         heading: 'Head1',
         active: false,
         route: 'head1'
      },
      {
         heading: 'Head2',
         active: false,
         route: 'head2'
         tooltip: 'head2' // tried, doesnt work
      }];

     self.selectedMenus = []'
     self.tooltip = appConfig.displayName; // tried not working

what would be the right approach to show tooltip with the correct header, and location?

Answer 1

Not sure what appConfig is (not visible in your snippet) but you have to add the text you want to show in the tooltip to an instance variable of the controller if you're using controllerAs or a $scope variable.

Please have a look at the code below or in this jsFiddle.

It's not clear what rt-tool-menus is. Is it a custom directive?

angular.module('demoApp', ['ngAnimate', 'ui.bootstrap'])
.config(function($tooltipProvider) {
	$tooltipProvider.options({placement: 'bottom'});
})
.controller('mainController', function($scope){
    
    this.displayName = 'Hello there';
});

.main-navigation {
    border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>
<div ng-app="demoApp" ng-controller="mainController as mainCtrl">
    <div class="main-navigation">
       <div rt-tool-menus-"menus" selected="selectedMenus" tooltip="{{mainCtrl.displayName}}">Hover me to show tooltip!!!</div>
    </div>
</div>