Tooltips

Code

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{ label: 'Sales', data: [30, 50, 45, 60] }]
  },
  options: {
    plugins: {
      tooltip: {
        enabled: true,
        backgroundColor: 'rgba(0,0,0,0.85)',
        titleColor: '#fff',
        bodyColor: '#fff',
        borderColor: '#fff',
        borderWidth: 1,
        padding: 10,
        cornerRadius: 6,
        displayColors: true,
        intersect: false,
        mode: 'index',
        callbacks: {
          title: (items) => 'Month: ' + items[0].label,
          label: (item) => item.dataset.label + ': $' + item.parsed.y + 'k',
          footer: (items) => {
            const total = items.reduce((sum, i) => sum + i.parsed.y, 0);
            return 'Total: $' + total + 'k';
          }
        }
      }
    }
  }
});

Explanation

The tooltip plugin (note: 'tooltip' in v3+, not 'tooltips' as in v2) supports full styling via backgroundColor, padding, cornerRadius, and borderWidth. The callbacks object lets you override title, label, and footer with custom functions that receive parsed data. mode:'index' with intersect:false shows all datasets at a hovered position.

More Chart.js Snippets