How to add Tooltip for column headers in PivotGrid?
This KB show cases the example to add Tooltip for column headers in PivotGrid.
Solution:
You can add a tooltip to PivotGrid column headers and it can be displayed as unique for each column cells. Please follow the below steps.
Step 1:
Use the `mousehover` and `mouseleave` events of jQuery in the `renderSuccess` event.
JS
$("#PivotGrid1").ejPivotGrid({
//…
renderSuccess: "renderSuccess"
});
MVC
@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(cl=>cl.RenderSuccess("renderSuccess"))
ASP
<ej:PivotGrid ID="PivotGrid1" runat="server" ClientIDMode="Static"> <%-- DataSource --%> <ClientSideEvents RenderSuccess="renderSuccess" /> </ej:PivotGrid>
JS (Event for all platforms)
function renderSuccess() {
//mousehover event
$(".colheader, .summary").not(".customHeaderTooltip").hover(function (e) {
$("#gridTooltip").remove();
if ($(e.target).text() != null && $(e.target).text() != " " || ($(e.target).hasClass("e-expand") || $(e.target).hasClass("e-collapse"))) {
var targetElement = ($(e.target).hasClass("e-expand") || $(e.target).hasClass("e-collapse")) ? $(e.target).parent() : $(e.target);
if (($(targetElement)).hasClass("colheader") || ($(targetElement)).hasClass("summary"))
columnHeaderCount = parseInt($($(targetElement)).attr("data-p").split(',')[0]) - (parseInt($("[data-p='0,0'").attr("colspan")) - 1);
var toolTipText = "PivotColumn Number: " + (columnHeaderCount); // 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>\n");
// Positioning of Tooltip
var cellPosition = e.target.getBoundingClientRect();
var containerEndPos = $("#PivotGrid1").parent().position().left + $("#PivotGrid1").parent().width();
var tooltipEndPos = cellPosition.left + $("#gridTooltip").width();
var leftPosition = (cellPosition.left > 0 ? cellPosition.left : 0) + ((containerEndPos - tooltipEndPos) < 0 ? ((containerEndPos - tooltipEndPos) - 20) : 5);
var topPosition = ($($("#PivotGrid1").data("ejPivotGrid").element).height() - cellPosition.top) < 100 ? (cellPosition.top - $("#gridTooltip").outerHeight() - 2) : cellPosition.top + 40;
$("#gridTooltip").css({ left: leftPosition, top: topPosition + 5 });});
//mouseleave event
$(".colheader, .summary, .customHeaderTooltip").mouseleave(function (e) {
$("#gridTooltip").remove();
});
}
Step 2:
Use the following CSS for tooltip display.
<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>
