#tooltip
A tooltip can be displayed when hovering the mouse over the column header and data area.
Display Tooltip
Set whether to display tooltips for the entire header.
gridView.setHeader({ showTooltip: true });To change the header tooltip to different content, specify a string in header.tooltip.
//
When first set up..
var columns = [{
name: "KorName",
fieldName: "KorName",
width: "60",
header: {
text: "Name",
//Header tooltip settings
showTooltip:true;
tooltip:"name"
},
renderer:{
//Data area tooltip settings
showTooltip:true
}
}, {
...
}];
gridView.setColumns(columns);
or
//When set dynamically
gridView.setColumnProperty("KorName","header",{showTooltip:true, tooltip:"Name"})To display a tooltip in the data area, simply set column.renderer.showTooltip to true.
The tooltip in the data area displays the original value by default, and uses the onShowTooltip event to display different content.
var columns = [{
name: "KorName",
fieldName: "KorName",
width: "60",
header: {
text: "name"
},
renderer:{
showTooltip:true
}
}, {
...
}];
gridView.setColumns(columns);Show Tooltip only for cells in Ellipsis state
Set tooltip to be shown only for cells in Ellipsis state.
gridView.displayOptions.showTooltip = true;
gridView.displayOptions.tooltipEllipsisOnly = true;
gridView.header.showTooltip = true;
gridView.header.tooltipEllipsisOnly = true;
onShowTooltip event
The onShowTooltip event is a callback function that occurs when a tooltip is displayed on the screen. In this callback function you can change the message displayed in the tooltip. Check the changed tooltip in the name column.
gridView.onShowTooltip = function(grid, index, value) {
var column = index.column;
var itemIndex = index.itemIndex;
var tooltip = value;
if (column == "KorName") {
tooltip =
"Name: " +
value +
"\r\nGender: " +
grid.getValue(itemIndex, "Gender") +
"\r\nAge:" +
grid.getValue(itemIndex, "Age")
}
return tooltip;
};