Angular ui-grid tooltip not displaying

Question

I'm trying to apply a simple filter on ui-grid cells and add a tooltip to them but it's not working. The filter is working correctly but not the tooltip. it's only displayed when I remove the filter. cellFilter: 'number: 2', cellTooltip: 'Custom tooltip - maybe some help text' here is a plunker with the example I'm talking about. any help is really apreciated

Answer 1

You can fix this issue introducing custom filter - formatNumber to format the number cellFilter: 'formatNumber:2' with tooltip -

var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [{
      field: 'name'
    }, {
      field: 'amount',
      name: 'Number',
      cellFilter: 'formatNumber:2',
      cellTooltip: 'Custom tooltip - maybe some help text'

    }, {
      field: 'amount',
      name: 'Currency',
      cellFilter: 'formatNumber:2',
      cellTooltip: 'Custom tooltip - maybe some help text'
    }, ]
  };

  $http.get('data.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

app.filter('formatNumber', function() {
  return function(input, decimalPlaces) {
    if (isNaN(input))
      return input;
    else {
      return input.toFixed(decimalPlaces);
    }
  };
});