CODEWITHSUNDEEP
angularjsangular-ui
Kalpesh Prajapati
Kalpesh Prajapati

Reputation: 1711

call function in angular ui tooltip

Have used this code which invokes the user defined function : getTooltipText

<i tooltip=\"{{ getTooltipText(arg1) }}\"> </i>
....

//function definition

$scope.getTooltipText = function(arg1){
console.log(arg1); // prints undefined
....
return text;
}

But it is not working. Have even tried trinary operator, but no luck!! Any suggestion?

Upvotes: 1

Views: 3854

Answers (1)

AGupta
AGupta

Reputation: 5734

instead of {{ getTooltipText(arg1) }} ,may be you can use ngMouseenter and ngMouseleave directive.

<div ng-mouseenter="getTooltipText(arg1)">     
    <i tooltip="{{tooltip}}"></i>
</div>

In your controller: 

$scope.getTooltipText = function(arg1){
   $scope.tooltip = "Your tooltip here";
}

link
(I am not sure about usage of arg1)

I took code from angular site and modified it a little just to demonstrate working of it: 

   <body ng-app="" ng-controller="controller">
   <button ng-mouseenter="mouseOvver()" ng-mouseleave="mouseLeave()">
   when mouse enters
 </button>
 count: {{msg}}

 <script type="text/javascript">
 function controller($scope)
 {
   $scope.mouseOvver = function()
   {
     $scope.msg="Ok I got u";
   }
   $scope.mouseLeave = function()
   {
     $scope.msg="";
   }
 }
 </script>
</body>

Upvotes: 3

Related Questions