venerdì 17 aprile 2015

Dynamic tooltip on TD element with Bootstrap and AngularJS.

AngularJS v. 1.2.14, Bootstrap v3.3.4

I have a table in my HTML page and on a TD element I'd like to add a dynamic tooltip because in then InnerText there is the code of the User State and in the tooltip I want to see the description of the User State.
Obviously, in my page there is a Controller and others modules loaded by AngularJS that I don’t show for simplicity.

 This is my tip:

<tr ng-repeat="r in vm.userRoles">
...
<td title="{{vm.viewState(r)}}" tooltip-trigger="mouseenter" tooltip-placement="top">{{r.Stato}}</td>
...
</tr>

Then in my AngularJS Controller I’ve added this function

vm.states: it is an array of User State.
function ViewState(r) {
       var state = $filter('filter')(vm.states, { State: r.State })[0];
       if (state != undefined) {
              return state.Description;
       } else {
              return '';
              }           
       }


And these are the results: