Including the data cell, if the mouse has been over the header, footer and summary cells for a period of time, a tooltip will be displayed. And, you can customize the contents to be displayed in the tooltip with html.
In order to display the tooltip, DisplayOptions.showTooltip should be specified as true first. And, the callback function which returns html contents should be specified in tooltipCallback property of each area model.
There are callback properties which return html tooltip contents in each area.
GridHeader.tooltipCallback, GridFooter.tooltipCallback, HeaderSummary.tooltipCallback, GridBody.tooltipCallback,
And, in the case of data cell, you can specify ValueColumn.tooltipCallback by each column, and this property takes precedence over GridBody.tooltipCallback.
grid.setOptions({
footer: {
tooltipCallback: function (column, value) {
if (!isNaN(value)) {
var grid = column.grid();
var fld = column.dataIndex();
return '<span style="text-decoration:underline;">' + column.header().displayText() + '</span><br>' +
'Sum: <b>' + DataLudi.formatNumber('#,##0.00', grid.getSummary(fld, 'sum')) + '</b><br>' +
'Average: <b>' + DataLudi.formatNumber('#,##0.00', grid.getSummary(fld, 'avg')) + '</b>';
}
}
},
});
DisplayOptions.tooltipDelay: ms. Waiting time before displaying the tooltip in the current cell.
DisplayOptions.tooltipDuration: ms. The period of displaying the tooltip. It will disappear as soon as move to another cell.
The background color and base font of the tooltip view can be specified through DisplayOptions.tooltipStyles or set through tooltip area in GridBase.loadStyles.
In the case of data cell, you can also specify whether to display the tooltip through showTooltip property in Cell Renderer level, and GridBody.tooltipCallback or ValueColumn.tooltipCallback will be ignored then. Please refer to Link Cell Renderer example.