JavaScript Grid

Set the enabletooltips property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;"></div>

CSS

.jqx-pivotgrid-item {
  background-color: yellow;
}

JavaScript

var data = new Array();
var countries = [
  "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
];
var dataPoints = [
  "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < countries.length * 2; i++) {
  var row = {};
  var value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
  row["country"] = countries[i % countries.length];
  row["value"] = value;
  data[i] = row;
}
// create a data source and data adapter
var source = {
  localdata: data,
  datatype: "array",
  datafields: [{
      name: 'country',
      type: 'string'
    },
    {
      name: 'value',
      type: 'number'
    }
  ]
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
var pivotDataSource = new $.jqx.pivot(
  dataAdapter, {
    pivotValuesOnRows: false,
    rows: [{
      dataField: 'country',
      width: 190
    }],
    columns: [],
    values: [{
        dataField: 'value',
        width: 200,
        'function': 'min',
        text: 'cells left alignment',
        formatSettings: {
          align: 'left',
          prefix: '',
          decimalPlaces: 2
        }
      },
      {
        dataField: 'value',
        width: 200,
        'function': 'max',
        text: 'cells center alignment',
        formatSettings: {
          align: 'center',
          prefix: '',
          decimalPlaces: 2
        }
      },
      {
        dataField: 'value',
        width: 200,
        'function': 'average',
        text: 'cells right alignment',
        formatSettings: {
          align: 'right',
          prefix: '',
          decimalPlaces: 2
        }
      }
    ]
  });
// create a pivot grid
$('#divPivotGrid').jqxPivotGrid({
  source: pivotDataSource,
  treeStyleRows: true,
  autoResize: false,
 ...