---
title: "Sparklines - Tooltips"
enterprise: true
framework: vue
version: "36.1.0"
---
# Sparklines - Tooltips
Tooltips containing data related to specific points will appear when the sparkline is hovered. Sparkline tooltips are customisable as discussed below.
The following sections cover how sparkline tooltips can be customised:
- [Disabling Tooltips](https://www.ag-grid.com/vue-data-grid/sparklines-tooltips/#disabling-sparkline-tooltips) - shows how to disable tooltips.
- [Tooltip Data](https://www.ag-grid.com/vue-data-grid/sparklines-tooltips/#tooltip-data) - covers how to change title and content of the default tooltip and access data from other columns in the same row.
- [Tooltip Styles](https://www.ag-grid.com/vue-data-grid/sparklines-tooltips/#using-css-styles) available to customise the default tooltip styles.
- [Custom Tooltip](https://www.ag-grid.com/vue-data-grid/sparklines-tooltips/#custom-tooltip) - demonstrates how a completely custom HTML template can be used as the tooltip.
## Disabling Sparkline Tooltips
Sparkline tooltips are enabled by default. They can be disabled via the `tooltip` options as shown in the code snippet below:
```js
sparklineOptions: {
tooltip: {
enabled: false, // removes sparkline tooltips
}
}
```
## Default Tooltip
The default sparkline tooltip has the following template:
```html
```
The tooltip will show the Y value of the hovered item in the **Content** section of the tooltip, and the X value (if it exists) is displayed in the **Title** section of the tooltip. Both of these sections are inline `` elements.
See the screenshots below for illustrations of these two cases.
No Title
With Title
## Tooltip Data
### Tooltip Renderer
The tooltips can be customised using a tooltip `renderer` function supplied to the `tooltip` options as shown below:
```js
sparklineOptions: {
tooltip: {
renderer: tooltipRenderer // Add tooltip renderer callback function to customise tooltip styles and content
}
}
```
- The `renderer` is a callback function which receives data values associated with the highlighted data point.
- It returns an object with the `content` and `title` properties containing plain text that is used for the **Content** and **Title** sections of the tooltip.
- Alternatively, the `renderer` function could return a string representing HTML content, which can be used to provide completely [Custom Tooltips](https://www.ag-grid.com/vue-data-grid/sparklines-tooltips/#custom-tooltip).
Here's an example renderer function.
```js
const tooltipRenderer = (params) => {
const { yValue, xValue } = params;
return {
title: new Date(xValue).toLocaleDateString(), // formats date X values
content: yValue.toFixed(1), // format Y number values
}
}
```
The following example demonstrates the results of the tooltip renderer above. Note that:
- The renderer function sets the tooltip `content` to render Y values formatted with 1 digit after the decimal point.
- The title of the tooltips is set to X values provided in the `params` formatted using the `toLocaleString()` method. This is optional because if X values are provided in the data, they will be formatted and displayed in the tooltip title by default.
#### Sparkline Tooltip Renderer
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
AgChartsCommunityModule,
AgSparklineOptions,
} from "ag-charts-community";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ClipboardModule,
ContextMenuModule,
SparklinesModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
SparklinesModule.with(AgChartsCommunityModule),
ClipboardModule,
ContextMenuModule,
]);
function tooltipRenderer(params: any) {
return {
title: new Date(params.xValue).toLocaleDateString(),
content: params.yValue.toFixed(1),
};
}
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef(null);
const columnDefs = ref([
{ field: "symbol", maxWidth: 120 },
{ field: "name", minWidth: 250 },
{
field: "change",
cellRenderer: "agSparklineCellRenderer",
cellRendererParams: {
sparklineOptions: {
tooltip: {
renderer: tooltipRenderer,
},
} as AgSparklineOptions,
},
},
{
field: "volume",
maxWidth: 140,
},
]);
const defaultColDef = ref({
flex: 1,
minWidth: 100,
});
const rowData = ref(getData());
const rowHeight = ref(50);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
rowHeight,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Sparkline Tooltip Renderer](https://www.ag-grid.com/examples/sparklines-tooltips/sparkline-tooltip-renderer/vue3)
### Accessing Row Data
It is possible to display data from other columns of the current row in the sparkline tooltip. This access is provided by the input parameter supplied to the [Tooltip Renderer](https://www.ag-grid.com/vue-data-grid/sparklines-tooltips/#tooltip-renderer), which includes a `context` object with a `data` property containing the row data.
The following snippet shows how values from the **Symbol** column can be shown in the tooltip title:
```js
const tooltipRenderer = (params) => {
const { context } = params;
return {
title: context.data.symbol, // sets title of tooltips to the value for the 'symbol' field
}
}
```
The following example demonstrates the above tooltip renderer.
#### Accessing Row Data
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
AgChartsCommunityModule,
AgSparklineOptions,
} from "ag-charts-community";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ClipboardModule,
ContextMenuModule,
SparklinesModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
SparklinesModule.with(AgChartsCommunityModule),
ClipboardModule,
ContextMenuModule,
]);
function tooltipRenderer(params: any) {
return {
title: params.context.data.symbol,
};
}
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef(null);
const columnDefs = ref([
{ field: "symbol", maxWidth: 120 },
{ field: "name", minWidth: 250 },
{
field: "change",
cellRenderer: "agSparklineCellRenderer",
cellRendererParams: {
sparklineOptions: {
tooltip: {
renderer: tooltipRenderer,
},
} as AgSparklineOptions,
},
},
{
field: "volume",
maxWidth: 140,
},
]);
const defaultColDef = ref({
flex: 1,
minWidth: 100,
});
const rowData = ref(getData());
const rowHeight = ref(50);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
rowHeight,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Accessing Row Data](https://www.ag-grid.com/examples/sparklines-tooltips/sparkline-accessing-row-data/vue3)
## Using CSS Styles
More styling can be applied using the CSS class selector to select the tooltip HTML elements with the following class attributes: `ag-charts-tooltip`, `ag-charts-tooltip-title`, `ag-charts-tooltip-content`, and modifying the style definitions in a style sheet file.
See [Styling Chart Tooltips](https://www.ag-grid.com/charts/javascript/tooltips/#using-css-styles)
This is shown in the example below. Note that:
- The default tooltip template is used and the style definitions are overriden in the styles.css file.
#### Styling Sparkline Tooltips
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
AgChartsCommunityModule,
AgSparklineOptions,
} from "ag-charts-community";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ClipboardModule,
ContextMenuModule,
SparklinesModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
SparklinesModule.with(AgChartsCommunityModule),
ClipboardModule,
ContextMenuModule,
]);
function tooltipRenderer(params: any) {
return {
title: params.context.data.symbol,
};
}
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef(null);
const columnDefs = ref([
{ field: "symbol", maxWidth: 120 },
{ field: "name", minWidth: 250 },
{
field: "change",
cellRenderer: "agSparklineCellRenderer",
cellRendererParams: {
sparklineOptions: {
tooltip: {
renderer: tooltipRenderer,
},
} as AgSparklineOptions,
},
},
{
field: "volume",
maxWidth: 140,
},
]);
const defaultColDef = ref({
flex: 1,
minWidth: 100,
});
const rowData = ref(getData());
const rowHeight = ref(50);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
rowHeight,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Styling Sparkline Tooltips](https://www.ag-grid.com/examples/sparklines-tooltips/sparkline-tooltip-advanced-styles/vue3)
## Custom Tooltip
Instead of having the [Tooltip Renderer](https://www.ag-grid.com/vue-data-grid/sparklines-tooltips/#tooltip-renderer) return an object with title and content strings to be used in the default tooltip template, you can return a string with completely custom markup that will override the template.
We could use the following tooltip renderer to return custom HTML for the sparkline tooltip:
```js
const tooltipRenderer = (params) => {
const { yValue, context } = params;
return `
${context.data.symbol}
Change: ${yValue}
Volume: ${context.data.volume}
`;
}
```
The tooltip renderer function receives the `params` object as a single parameter. The `xValue` and `yValue` for the highlighted data point as well as the reference to the raw `datum` element from the sparkline data array is provided in the `params` object.
Other row data is provided in the `context.data` object inside the `params` object. You can process the raw values in the `params` object however you like before using them as a part of the returned HTML string.
The effect of applying the tooltip renderer from the snippet above can be seen in the example below.
Note that:
- The structure of the returned DOM is up to you.
- In this example the value of the title comes from `params.context.data.symbol` which is the value for the **Symbol** column for the given row.
- The elements have custom CSS class attributes, but the default class names can also be used so that the tooltip gets the default styling.
- The styles for the elements are defined in the external styles.css file.
#### Custom Tooltips
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
AgChartsCommunityModule,
AgSparklineOptions,
} from "ag-charts-community";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ClipboardModule,
ContextMenuModule,
SparklinesModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
SparklinesModule.with(AgChartsCommunityModule),
ClipboardModule,
ContextMenuModule,
]);
const body = document.body;
function tooltipRenderer(params: any) {
const { yValue, context } = params;
return `