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 - shows how to disable 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 - shows the different options available to customise the default tooltip styles.
- Tooltip Container and Offset - shows how the tooltip container and offset position from the mouse cursor can be modified.
- 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:
sparklineOptions: {
tooltip: {
enabled: false, // removes sparkline tooltips
}
}
Default Tooltip
The default sparkline tooltip has the following template:
<div class="ag-sparkline-tooltip">
<span class="ag-sparkline-tooltip-title"></span>
<span class="ag-sparkline-tooltip-content"></span>
</div>
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 <span>
elements.
See the screenshots below for illustrations of these two cases.
Tooltip Data
Tooltip Renderer
The tooltips can be customised using a tooltip renderer
function supplied to the tooltip
options as shown below:
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
andtitle
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.
Here's an example renderer function.
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 thetoLocaleString()
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.
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, 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:
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.
Tooltip Styles
The Tooltip Renderer function can return style attributes including color
, backgroundColor
and opacity
for the tooltip as shown below:
const tooltipRenderer = (params) => {
return {
// sets styles for tooltip
color: 'white',
backgroundColor: 'rgb(78,78,255)',
opacity: 0.7,
}
}
The following example demonstrates the results of the tooltip styles configured via the tooltip renderer above.
More styling can be applied using the CSS class selector to select the tooltip HTML elements with the following class attributes: ag-sparkline-tooltip
, ag-sparkline-tooltip-title
, ag-sparkline-tooltip-content
, and modifying the style definitions in a stylesheet file.
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.
Tooltip Container and Offset
The tooltip position relative to the mouse cursor can be modified using the xOffset
and yOffset
properties in tooltip
options as shown below:
sparklineOptions: {
tooltip: {
xOffset: 0, // positions tooltip 0px to the right of the top left of the mouse cursor
yOffset: 20, // positions tooltip 20px down from the top left of the mouse cursor
}
}
By default the tooltip is confined to the length of the sparkline cell, which can be changed by providing a container HTML element to allow the tooltip to overflow the cell.
In the snippet below, the tooltip container has been configured to be the document.body
which allows the tooltip to be positioned anywhere within the <body>
node of the current document.
sparklineOptions: {
tooltip: {
container: document.body, // confines the tooltip to the document body node instead of the sparkline cell
}
}
Here's a live example to demonstrate the configuration above.
- Note that the tooltip is now positioned underneath the mouse cursor as
xOffset
is set to0
px andyOffset
to20
px. - The effect of the tooltip
container
configuration is that the tooltip will not flip to the left of the mouse cursor when it reaches the end of the sparkline cell width, instead it will only flip if the tooltip position surpasses the document body element's width.
Custom Tooltip
Instead of having the 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:
const tooltipRenderer = (params) => {
const { yValue, context } = params;
return `<div class='my-custom-tooltip my-custom-tooltip-arrow'>
<div class='tooltip-title'>${context.data.symbol}</div>
<div class='tooltip-content'>
<div>Change: ${yValue}</div>
<div>Volume: ${context.data.volume}</div>
</div>
</div>`;
}
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.
Interfaces
SparklineTooltipOptions
Properties available on the SparklineTooltipOptions
interface.
Set to false to disable tooltips. |
The element to place the tooltip into. This can be used to confine the tooltip to a specific area which may be outside of the sparkline grid cell. |
The horizontal distance in pixels between the cursor and the top left corner of the tooltip. |
The vertical distance in pixels between the cursor and the top left corner of the tooltip. |
A callback function used to create the content for the tooltips. This function should return an object or a HTML string used to render the tooltip. |
TooltipRendererParams
Properties available on the TooltipRendererParams
interface.
The grid context, includes row data, giving access to data from other columns in the same row. |
The raw datum associated with the point. |
The X value of the data point. |
The Y value of the data point. |
TooltipRendererResult
Properties available on the TooltipRendererResult
interface.
Set to false to disable individual tooltip. |
The content to display in each tooltip. |
The title of the tooltip. |
The CSS color for the title text. |
The CSS color for the background of the tooltip title. |
The opacity of the background for the tooltip title. |
Next Up
Continue to the next section to learn about: Sparkline Points of Interest.