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

Sumit Deshpande · Accepted Answer · 2016-12-29 15:05:01Z

0

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);
    }
  };
});

answered Dec 29, 2016 at 15:05

Sumit Deshpande

2,1552 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Med Over a year ago

thank you for your solution that fixes my issue, I just updated ` input.toFixed(decimalPlaces);` with ` Number(input).toFixed(decimalPlaces);` however do you have any idea how can I apply a cell template of tooltip for this example. like

cellTemplate: '<div class="grid-tooltip" uib-tooltip="The applied margin for extra revenues is X %" tooltip-placement="top" tooltip-append-to-body="true"><div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col)}}</div></div>'

and keep the filter working? Thank you in advance

Sumit Deshpande Over a year ago

Create function on tooltip e.g. cellTooltip: function(row, col) { return 'Name: ' + row.entity.name + ' Company: ' + row.entity.company; }

Med Over a year ago

I mean applying something like this

cellTemplate: '<div class="grid-tooltip" tooltip="{{ row.entity.state }}" tooltip-placement="top" tooltip-append-to-body="true"><div class="ui-grid-cell-contents">{{ COL_FIELD }}</div></div>'

that will allow me to use uib-tooltip for the tooltip

Med Over a year ago

here is a plunker

Collectives™ on Stack Overflow

Angular ui-grid tooltip not displaying

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related