HelpBot Assistant

How can I help you?

Tooltip in Vue Pivot Table Component

22 Jan 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.

<template>
  <div id="app">
    <ejs-pivotview :height="height" :dataSourceSettings="dataSourceSettings" :showTooltip="showTooltip"> </ejs-pivotview>
  </div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

const dataSourceSettings = {
  dataSource: pivotData,
  expandAll: false,
  enableSorting: true,
  drilledMembers: [{ name: 'Year', items: ['FY 2015'] }, { name: 'Country', items: ['France'] }],
  columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
  values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
  rows: [{ name: 'Country' }, { name: 'Products' }],
  formatSettings: [{ name: 'Amount', format: 'C0' }],
  filters: []
};
const height = 350;
const showTooltip = false;

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>
<template>
  <div id="app">
    <ejs-pivotview :height="height" :dataSourceSettings="dataSourceSettings" :showTooltip="showTooltip"> </ejs-pivotview>
  </div>
</template>
<script>
import { PivotViewComponent } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

export default {
  name: "App",
  components: {
    "ejs-pivotview": PivotViewComponent
  },
  data() {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        enableSorting: true,
        drilledMembers: [{ name: 'Year', items: ['FY 2015'] }, { name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
      },
      height: 350,
      showTooltip: false
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>

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 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 chartSettings.

<template>
  <div id="app">
    <ejs-pivotview :dataSourceSettings="dataSourceSettings" :displayOption="displayOption" :chartSettings="chartSettings"
      :toolbar="toolbar" :showToolbar="showToolbar" :tooltipTemplate="tooltipTemplate"> </ejs-pivotview>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, Toolbar } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

const dataSourceSettings = {
  dataSource: pivotData,
  columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
  values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
  rows: [{ name: 'Country' }, { name: 'Products' }],
  filters: []
};
const displayOption = { view: 'Both' };
const chartSettings = {
  value: 'Amount',
  enableExport: true,
  chartSeries: { type: 'Column', animation: { enable: false } },
  enableMultipleAxis: false,
  tooltip: { template: '<span class="pivotTooltipTemplateWrap">${aggregateType} of ${valueField}: ${value}</span>' }
};
const toolbar = ['Grid', 'Chart'];
const showToolbar = true;
const tooltipTemplate = `<div class='pivotTooltipTemplateWrap'><span class='pivotTooltipHeader'>` + "${columnHeaders}" + `:</span ><span class='pivotTooltipValue'>` + "${value}" + `</span></div>`;

provide('pivotview', [Toolbar]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";

.pivotTooltipTemplateWrap {
  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>
<template>
  <div id="app">
    <ejs-pivotview :dataSourceSettings="dataSourceSettings" :displayOption="displayOption" :chartSettings="chartSettings"
      :toolbar="toolbar" :showToolbar="showToolbar" :tooltipTemplate="tooltipTemplate"> </ejs-pivotview>
  </div>
</template>
<script>
import { PivotViewComponent, Toolbar } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

export default {
  name: "App",
  components: {
    "ejs-pivotview": PivotViewComponent
  },
  data() {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        filters: []
      },
      height: 350,
      displayOption: { view: 'Both' },
      chartSettings: {
        value: 'Amount', enableExport: true, chartSeries: { type: 'Column', animation: { enable: false } }, enableMultipleAxis: false,
        tooltip: { template: '<span class="pivotTooltipTemplateWrap">${aggregateType} of ${valueField}: ${value}</span>' }
      },
      toolbar: ['Grid', 'Chart'],
      showToolbar: true,
      tooltipTemplate: `<div class='pivotTooltipTemplateWrap'><span class='pivotTooltipHeader'>` + "${columnHeaders}" + `:</span ><span class='pivotTooltipValue'>` + "${value}" + `</span></div>`
    }
  },
  provide: {
    pivotview: [Toolbar]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";

.pivotTooltipTemplateWrap {
  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>