Tooltips ImplementationUser-Defined Tooltips

VIEW MORE FEATURES
VIEW HTML
EDIT ON CODEPEN
To display tooltips when the user mouse overs an item, the showDataTips attribute on the chart element must be set to true.

In this example, a user-defined JavaScript function is called to display tooltips when the user mouse overs the columns on the chart.
<Column3DChart showDataTips="true" dataTipJsFunction="dataTipFunc">

function dataTipFunc(seriesId, seriesName, index, xName, yName, data, values) {
return "<table cellpadding='0' cellspacing='1'>"
+"<tr>"
+"<td align='center' colspan='2' style='border-bottom:solid 1px #8b8b8b;'><img src='https://www.koolchart.com/demo/KoolChart/Assets/Images/monitor.png'></td>"
+"</tr><tr>"
+"<td >series ID</td><td align='center'>" + seriesId + "</td>"
+"</tr><tr>"
+"<td>displayName</td><td align='center'>" + seriesName + "</td>"
+"</tr><tr>"
+"<td>item Index</td><td align='center'>" + index + "</td>"
+"</tr><tr>"
+"<td>X-Axis Name</td><td align='center'>" + xName + "</td>"
+"</tr><tr>"
+"<td>X-Axis Name</td><td align='center'>" + yName + "</td>"
+"</tr><tr>"
+"<td>X-Axis Value</td><td align='center'>" + values[0] + "</td>"
+"</tr><tr>"
+"<td>Y-Axis Value</td><td align='center'>" + values[1] + "</td>"
+"</tr><tr>"
+"<td style='background-color:#e5e5e5;'>Total</td><td align='center' style='background-color:#e5e5e5;'>" + getSum(data) + "</td>"
+"</tr></table>";
}

function getSum(values) {
var sum = 0;
for(var v in values) {
sum += Number(values[v]) || 0;
}
return sum;
}