<style> .customHeaderTooltip { position: fixed !important; z-index: 500; display: none; border-width: 10px; height: auto; display:inline !important; background: #ecf0f1; border: 2px solid #bdc3c7; } .headerTooltipText { font-size: 12px; text-align: left; height: auto; font-weight: normal; margin: 5px 0 10px 0; opacity:1; padding: 5px; } </style> |
$("#PivotGrid1").ejPivotGrid( { url: "/Olap", renderSuccess: "renderSuccess" }); function renderSuccess() { $(".colheader").hover(function (e) { $("#gridTooltip").remove(); var pGridObj = $("#PivotGrid1").data("ejPivotGrid"); var targetHeader = e.target; var text = "predefined text"; // You can customize your text here $("#PivotGrid1").append("<div id='gridTooltip' class='customHeaderTooltip' role='tooltip'></div>"); $("#gridTooltip").append("<p class='headerTooltipText'>" + text + "</p><p class='headerTooltipText'>" + text + "</p><p class='headerTooltipText'>" + text + "</p>"); var containerEndPos = 0; var tdPos = targetHeader.getBoundingClientRect(); containerEndPos = $("#PivotGrid1").parent().position().left + $("#PivotGrid1").parent().width(); var tooltipEndPos = tdPos.left + $("#gridTooltip").width(); var leftPos = 0, topPos = 0; leftPos = (tdPos.left > 0 ? tdPos.left : 0) + ((containerEndPos - tooltipEndPos) < 0 ? ((containerEndPos - tooltipEndPos) - 20) : 5); topPos = ($(pGridObj.element).height() - tdPos.top) < 100 ? (tdPos.top - $("#gridTooltip").outerHeight() - 2) : tdPos.top + 40; $("#gridTooltip").css({ left: leftPos, top: topPos }); }); $(".colheader").mouseleave(function (e) { $("#gridTooltip").remove(); }); } |
Query | Response | |
1. I can I apply different text to a different column? | For PivotGrid, you can change tooltip text dynamically through the below code snippet. Code Snippet [JavaScript]:
Also, refer to the sample for the above changes: https://www.syncfusion.com/downloads/support/forum/140603/ze/PivotGridDemo-858883662 | |
2. How can I do the same but for PivotChart? | You can customize the tooltip text in PivotChart through the args.data.currentText in the “toolTipInitialize” event. Please refer the code snippet below. Code Snippet: [JavaScript]
Please find the below sample link for your reference. Sample Link: https://jsplayground.syncfusion.com/backxq2m |
$(".colheader, .summary").not(".customHeaderTooltip").hover(function (e) { $("#gridTooltip").remove(); if ($(e.target).text() != null && $(e.target).text() != " ") { var pGridObj = $("#PivotGrid1").data("ejPivotGrid"); var toolTipText = ""; if (!ej.isNullOrUndefined($(e.target).parent().find("th.colheader:eq(0)").attr("data-p"))) { columnHeaderCount = parseInt($(e.target).parent().find("th.colheader:eq(0)").attr("data-p").split(',')[0]) + parseInt($(e.target).parent().find("th.colheader:eq(0)").attr("data-p").split(',')[1]); toolTipText = $(e.target).attr("role") + " " + (columnHeaderCount - 1); // You can get current column index through (columnHeaderCount - 1) } $("#PivotGrid1").append("<div id='gridTooltip' class='customHeaderTooltip' role='tooltip'></div>"); $("#gridTooltip").append("<p class='headerTooltipText'>" + toolTipText + "</p>"); var containerEndPos = 0; var tdPos = e.target.getBoundingClientRect(); containerEndPos = $("#PivotGrid1").parent().position().left + $("#PivotGrid1").parent().width(); var tooltipEndPos = tdPos.left + $("#gridTooltip").width(); var leftPos = 0, topPos = 0; leftPos = (tdPos.left > 0 ? tdPos.left : 0) + ((containerEndPos - tooltipEndPos) < 0 ? ((containerEndPos - tooltipEndPos) - 20) : 5); topPos = ($(pGridObj.element).height() - tdPos.top) < 100 ? (tdPos.top - $("#gridTooltip").outerHeight() - 2) : tdPos.top + 40; $("#gridTooltip").css({ left: leftPos, top: topPos +5 }); } }); $(".colheader, .summary, .customHeaderTooltip").mouseleave(function (e) { $("#gridTooltip").remove(); }); } |
Column Index | Column Number |
Code snippet: ColumnIndex = $(e.target).attr("data-p").split(',')[0]); Screenshot1: | Code snippet: columnHeaderCount = parseInt($($(targetElement)).attr("data-p").split(',')[0]) - (parseInt($("[data-p='0,0'").attr("colspan"))-1); Output: |
I have tried to implement your solution, copy the code but it fails in the following line:
columnHeaderCount = parseInt($($(targetElement)).attr("data-p").split(',')[0]);
the reason is that $($(targetElement)) is
defined, however, the attribute data-p is
undefined: ie. $($(targetElement)).attr("data-p") is undefined
It should be a simple request. Any reason why it takes to much replies to work???
columnHeaderCount = parseInt($($(targetElement)).attr("p").split(',')[0]) - (parseInt($("[p='0,0'").attr("colspan"))-1); |
Older Version | Latest Version |
Version: 14.4.0.20 | Version: 16.3.0.21 |
$("#PivotChart1").ejPivotChart({
//dataSource
toolTipInitialize: "toolTipInitialize"
});
function toolTipInitialize(args) {
args.data.currentText = "PointIndex " + (args.data.pointIndex) + " SeriesIndex " + (args.data.seriesIndex);/*You can get the point Index and series index here
Point Index: Index of series collection
Series Index: Index of each series*/
} |
$("#PivotChart1").ejPivotChart({
//dataSource
legendItemMouseMove: "legendItemMouseMove",
renderSuccess: "renderSuccess"
});
function renderSuccess() {
$("[id*=PivotChart1Container_svg_Legend]").mouseleave(function (args) {
$("#chartTooltip").remove();
});
}
function legendItemMouseMove(args) {
$("#chartTooltip").remove();
pChartObj = $("#PivotChart1").data("ejPivotChart");
if (!ej.isNullOrUndefined(args.model.event.target)) {
$("#PivotChart1").append("<div id='chartTooltip' class='customHeaderTooltip' role='tooltip'></div>");
for (var i = 0; i < args.data.series.dataSource.length; i++) {
$("#chartTooltip").append("<p class='headerTooltipText'> xValues " + i + "- " + args.data.series.dataSource[i].xValues + " | yValues " + i + "- " + args.data.series.dataSource[i].yValues + "</p>");
}
var containerEndPos = 0;
var tdPos = args.model.event.target.getBoundingClientRect();
containerEndPos = $("#PivotChart1").parent().position().left + $("#PivotChart1").parent().width();
var tooltipEndPos = tdPos.left + $("#chartTooltip").width();
var leftPos = 0, topPos = 0;
leftPos = (tdPos.left > 0 ? tdPos.left : 0) + ((containerEndPos - tooltipEndPos) < 0 ? ((containerEndPos - tooltipEndPos) - 20) : 5);
topPos = ($(pChartObj.element).height() - tdPos.top) < 100 ? (tdPos.top - $("#chartTooltip").outerHeight() - 2) : tdPos.top + 40;
$("#chartTooltip").css({ left: leftPos, top: topPos + 5 });
}
} |
<style>
.customHeaderTooltip {
position: fixed !important;
z-index: 500;
display: none;
border-width: 10px;
height: auto;
display: inline !important;
background: #ecf0f1;
border: 2px solid #bdc3c7;
}
.headerTooltipText {
font-size: 12px;
text-align: left;
height: auto;
font-weight: normal;
margin: 5px 0 10px 0;
opacity: 1;
padding: 5px;
}
</style> |
function legendItemMouseMove(args) { $("#chartTooltip").remove(); pChartObj = $("#PivotChart1").data("ejPivotChart"); if (!ej.isNullOrUndefined(args.model.event.target)) { $("#PivotChart1").append("<div id='chartTooltip' class='customHeaderTooltip' role='tooltip'></div>"); for (var i = 0; i < args.data.series.dataSource.length; i++) { $("#chartTooltip").append("<p class='headerTooltipText'> xValues " + i + "- " + args.data.series.dataSource[i].xValues + " | yValues " + i + "- " + args.data.series.dataSource[i].yValues + "</p>"); } var containerEndPos = 0; var tdPos = args.model.event.target.getBoundingClientRect(); containerEndPos = $("#PivotChart1").parent().position().left + $("#PivotChart1").parent().width(); var tooltipEndPos = tdPos.left + $("#chartTooltip").width(); var leftPos = 0, topPos = 0; leftPos = (tdPos.left > 0 ? tdPos.left : 0) + ((containerEndPos - tooltipEndPos) < 0 ? ((containerEndPos - tooltipEndPos) - 20) : 5); topPos = ($(pChartObj.element).height() - tdPos.top) < 100 ? (tdPos.top - $("#chartTooltip").outerHeight() - 2) : tdPos.top + 40; $("#chartTooltip").css({ left: leftPos, top: topPos + 5 }); } $("[id*=PivotChart1Container_svg_Legend]").mouseleave(function (args) { $("#chartTooltip").remove(); }); } |