Images not showing inside Chart.js tooltips (externalTooltipHandler)

[jcduro]

Select Topic Area

Question

Body

Issue abierto en GitHub
Título: «Images not showing inside Chart.js tooltips (externalTooltipHandler)»

Description
Custom tooltips (externalTooltipHandler) are never fired, so product images are not displayed when hovering bars/pie slices. Only the default gray tooltip appears.

Steps to reproduce
Open chart.php on any browser.
Reduce window until ≤ 600 px (mobile).
Hover any bar or pie slice → no neon-black tooltip with image, only default gray box.

Expected behaviour
A floating neon box with:
Product thumbnail (WebP)
Name, code, total price

Current code
externalTooltipHandler declared before initCharts().
enabled: false + external: externalTooltipHandler in both charts.
console.log('¡External tooltip activado!'); never prints.

Environment
Chart.js 4.4.0 (CDN)
PHP 8.2 + PDO
Browsers: Chrome 120, Firefox 121, Safari iOS 17

Suspected cause
Function not attached at chart-creation time or DOM element missing.
Acceptance criteria
[ ] Tooltip with image appears on hover (desktop & mobile).
[ ] No console errors.
[ ] Still responsive after fix.

Labels
help wanted good first issue bug chartjs javascript

Repository
https://github.com/jcduro/Dynamic_Chart_PHP_MYSQL_JS

Demo
https://jcduro.bexartideas.com/proyectos/dashjc/chart/chart.php

[AMRYB]

The most likely reason is: your charts are being created (or re-created on mobile ≤ 600px) without the correct options.plugins.tooltip config, so Chart.js falls back to the default gray tooltip and your externalTooltipHandler never runs.

Here’s a clean, “works in Chart.js v4” fix.

---

Fix (Chart.js 4.x): attach external under options.plugins.tooltip

1) Use ONE shared tooltip config and apply it to every chart config (desktop + mobile)

const tooltipOptions = {
  enabled: false,                  // disables the default gray tooltip
  position: 'nearest',
  external: externalTooltipHandler // your custom handler
};

function buildCommonOptions() {
  return {
    responsive: true,
    maintainAspectRatio: false,
    interaction: { mode: 'nearest', intersect: true },
    plugins: {
      tooltip: tooltipOptions,
      // legend, title, etc...
    }
  };
}

// Bar chart
const barConfig = {
  type: 'bar',
  data: barData,
  options: buildCommonOptions()
};

// Pie chart
const pieConfig = {
  type: 'pie',
  data: pieData,
  options: buildCommonOptions()
};

barChart = new Chart(barCtx, barConfig);
pieChart = new Chart(pieCtx, pieConfig);

Important: if you have logic like if (window.innerWidth <= 600) { ... } that swaps options or re-creates charts, you must ensure the mobile config also includes plugins.tooltip.enabled=false and plugins.tooltip.external=externalTooltipHandler.

---

Common hidden cause: cloning options removes functions

If you do something like:

• JSON.parse(JSON.stringify(options))
• or any deep clone that strips functions

Then externalTooltipHandler gets removed silently.

Fix: re-attach the handler after cloning:

const opts = clonedOptions; // however you clone it
opts.plugins ??= {};
opts.plugins.tooltip ??= {};
opts.plugins.tooltip.enabled = false;
opts.plugins.tooltip.external = externalTooltipHandler;

---

Quick debug check (before new Chart(...))

console.log('tooltip cfg:', config.options?.plugins?.tooltip);
console.log('external is function?', typeof config.options?.plugins?.tooltip?.external);

You want: external is function? true

If it’s undefined, then your config is not reaching the chart at creation time (especially likely in the ≤ 600px path).

---

### If this answer helped you, please mark it as answered.