How can I help you?
Tooltip in React Pivot Table Component
26 Feb 202610 minutes to read
The tooltip displays contextual information when users hover over value cells in the pivot table. It can be enabled or disabled by setting the showTooltip property to true or false. By default, tooltip is enabled in the pivot table and shows the cell value along with row and column header information.
<ejs-pivotview id="PivotView" height="300" showTooltip="false">
<e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
<e-formatsettings>
<e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
</e-formatsettings>
<e-rows>
<e-field name="Country"></e-field>
<e-field name="Products"></e-field>
</e-rows>
<e-columns>
<e-field name="Year" caption="Year"></e-field>
<e-field name="Quarter"></e-field>
</e-columns>
<e-values>
<e-field name="Sold" caption="Units Sold"></e-field>
<e-field name="Amount" caption="Sold Amount"></e-field>
</e-values>
</e-datasourcesettings>
</ejs-pivotview>public ActionResult Index()
{
var data = GetPivotData();
ViewBag.DataSource = data;
return View();
}Tooltip Template
Users can customize the tooltip in the Pivot Table component by setting the tooltipTemplate property with their own HTML elements. This property accepts either an HTML string or an element ID. Use the following placeholders within the HTML to display dynamic values:
-
${rowHeaders}– Displays the row headers for the selected value cell. -
${columnHeaders}– Displays the column headers for the selected value cell. -
${rowFields}– Displays the row fields of the selected value cell. -
${columnFields}– Displays the column fields of the selected value cell. -
${valueField}– Displays the value field name of the selected cell. -
${aggregateType}– Specifies the aggregate type of the selected value cell. -
${value}– Displays the formatted value of the selected value cell.
Tooltip customization can be applied to both pivot table and pivot chart together, or configured individually. To customize the Pivot Table tooltip, define the HTML template via the tooltipTemplate property as described above. To set a custom tooltip for the Pivot Chart only, use the template property within the tooltip object of the e-chartSettings property.
The example below shows how to define the Pivot Table tooltip template in index.html and assign it to the tooltipTemplate property. The Pivot Chart tooltip is customized by setting an HTML string in the tooltip property of e-chartSettings.
<ejs-pivotview id="pivotview" showToolbar="true" tooltipTemplate="#Template" width="100%" height="300" toolbar="@(new List<string>() {"Grid", "Chart" })" >
<e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
<e-formatsettings>
<e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
</e-formatsettings>
<e-rows>
<e-field name="Country"></e-field>
<e-field name="Products"></e-field>
</e-rows>
<e-columns>
<e-field name="Year"></e-field>
<e-field name="Order_Source" caption="Order Source"></e-field>
</e-columns>
<e-values>
<e-field name="In_Stock" caption="In Stock"></e-field>
<e-field name="Sold" caption="Units Sold"></e-field>
<e-field name="Amount" caption="Sold Amount"></e-field>
</e-values>
<e-filters>
<e-field name="Product_Categories" caption="Product Categories"></e-field>
</e-filters>
</e-datasourcesettings>
<e-gridSettings columnWidth="140"></e-gridSettings>
<e-chartSettings>
<e-chartSeries type="Column"></e-chartSeries>
<e-tooltip enableMarker="true" template="<span class='wrap'>${aggregateType} of ${valueField}: ${value}</span>">
</e-tooltip>
</e-chartSettings>
<e-displayOption view="Both"></e-displayOption>
</ejs-pivotview>
<style>
#pivotview {
width: 100%;
height: 100%;
}
.e-tool-expand::before {
content: '\e702';
}
.wrap {
border: 3px solid #27b1f0;
background-color: #4d4d4d;
width: auto;
color: #FFFFFF;
padding: 5px;
font-size: 12px;
}
.pivotTooltipValue {
font-style: italic;
}
.pivotTooltipHeader {
color: aqua;
font-weight: bold;
width: 100px;
}
</style>
<script id="Template" type="text/x-template">
<div class='wrap'>
<div>
<span class='pivotTooltipHeader'>Row Headers :</span >
<span class='pivotTooltipValue'>${columnHeaders}${rowHeaders}</span >
</div>
<div>
<span class='pivotTooltipHeader'>Row Fields : </span>
<span class='pivotTooltipValue'>${rowFields}</span>
</div>
<div>
<span class='pivotTooltipHeader'>Column Headers :</span >
<span class='pivotTooltipValue'>${columnHeaders}</span>
</div>
<div>
<span class='pivotTooltipHeader'>Column Fields :</span>
<span class='pivotTooltipValue'>${columnFields}</span>
</div>
<div>
<span class='pivotTooltipHeader'>Value Field :</span>
<span class='pivotTooltipValue'>${valueField}</span>
</div>
<div>
<span class='pivotTooltipHeader'>Value : </span>
<span class='pivotTooltipValue'>${value}</span>
</div>
</div>
</script>public ActionResult Index()
{
var data = GetPivotData();
ViewBag.DataSource = data;
return View();
}
