angularjs - angular-ui bootstrap tooltip issue -
for reason way structured page, tooltip 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 right approach show tooltip correct header, , location?
not sure appconfig
(not visible in snippet) have add text want show in tooltip instance variable of controller if you're using controlleras
or $scope
variable.
please have @ code below or in jsfiddle.
it's not clear rt-tool-menus
is. 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 mainctrl"> <div class="main-navigation"> <div rt-tool-menus-"menus" selected="selectedmenus" tooltip="{{mainctrl.displayname}}">hover me show tooltip!!!</div> </div> </div>
Comments
Post a Comment