← Module 06 Tutorial Home

Custom Tooltip Callbacks

Hover over the bars below to see a fully customized tooltip: the title shows the full date, the body formats revenue as currency, and the footer displays the percentage of the total.

The Callbacks Object

Chart.js tooltips are controlled by the callbacks object inside options.plugins.tooltip. Each callback returns a string (or array of strings) that replaces the default text for that section of the tooltip:

Callback Tooltip Section Receives
title(tooltipItems) Top line (bold) Array of all hovered items
beforeLabel(tooltipItem) Line before the value Single tooltip item
label(tooltipItem) Main value line Single tooltip item
afterLabel(tooltipItem) Line after the value Single tooltip item
footer(tooltipItems) Bottom line (lighter text) Array of all hovered items

Source Code

This is the exact configuration used in the chart above:

plugins: { tooltip: { backgroundColor: 'rgba(26, 26, 46, 0.92)', titleFont: { size: 14, weight: 'bold' }, bodyFont: { size: 13 }, footerFont: { size: 12, weight: 'normal', style: 'italic' }, padding: 14, cornerRadius: 6, displayColors: true, boxPadding: 6, callbacks: { // Title: show full date title: function(tooltipItems) { const monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; return monthNames[tooltipItems[0].dataIndex] + ' 2025'; }, // Label: format as currency label: function(tooltipItem) { const value = tooltipItem.raw; return ' Revenue: $' + value.toLocaleString('en-US'); }, // Footer: percentage of total footer: function(tooltipItems) { const dataset = tooltipItems[0].dataset.data; const total = dataset.reduce((a, b) => a + b, 0); const pct = ((tooltipItems[0].raw / total) * 100).toFixed(1); return pct + '% of annual total ($' + total.toLocaleString() + ')'; } } } }
Tip: The tooltipItem object gives you access to .raw (the data value), .label (the x-axis label), .dataIndex (which data point), and .dataset (the full dataset object). Use console.log(tooltipItem) during development to explore all available properties.