CODEWITHSUNDEEP
angularjstooltipangular-bootstrap
myTD
myTD

Reputation: 1469

angular-ui bootstrap tooltip issue

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?

Upvotes: 0

Views: 1008

Answers (1)

AWolf
AWolf

Reputation: 8970

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>

Upvotes: 1

Related Questions