External HTML Tooltip

This sample shows how to use the external tooltip functionality to generate an HTML tooltip.

External HTML Tooltip - 图1

config setup external

  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     interaction: {
  6.       mode: 'index',
  7.       intersect: false,
  8.     },
  9.     plugins: {
  10.       title: {
  11.         display: true,
  12.         text: 'Chart.js Line Chart - External Tooltips'
  13.       },
  14.       tooltip: {
  15.         enabled: false,
  16.         position: 'nearest',
  17.         external: externalTooltipHandler
  18.       }
  19.     }
  20.   }
  21. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100, decimals: 0};
  3. const data = {
  4.   labels: Utils.months({count: DATA_COUNT}),
  5.   datasets: [
  6.     {
  7.       label: 'Dataset 1',
  8.       data: Utils.numbers(NUMBER_CFG),
  9.       fill: false,
  10.       borderColor: Utils.CHART_COLORS.red,
  11.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12.     },
  13.     {
  14.       label: 'Dataset 2',
  15.       data: Utils.numbers(NUMBER_CFG),
  16.       fill: false,
  17.       borderColor: Utils.CHART_COLORS.blue,
  18.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  19.     },
  20.   ]
  21. };
  1. const getOrCreateTooltip = (chart) => {
  2.   let tooltipEl = chart.canvas.parentNode.querySelector('div');
  4.   if (!tooltipEl) {
  5.     tooltipEl = document.createElement('div');
  6.     tooltipEl.style.background = 'rgba(0, 0, 0, 0.7)';
  7.     tooltipEl.style.borderRadius = '3px';
  8.     tooltipEl.style.color = 'white';
  9.     tooltipEl.style.opacity = 1;
  10.     tooltipEl.style.pointerEvents = 'none';
  11.     tooltipEl.style.position = 'absolute';
  12.     tooltipEl.style.transform = 'translate(-50%, 0)';
  13.     tooltipEl.style.transition = 'all .1s ease';
  15.     const table = document.createElement('table');
  16.     table.style.margin = '0px';
  18.     tooltipEl.appendChild(table);
  19.     chart.canvas.parentNode.appendChild(tooltipEl);
  20.   }
  22.   return tooltipEl;
  23. };
  25. const externalTooltipHandler = (context) => {
  26.   // Tooltip Element
  27.   const {chart, tooltip} = context;
  28.   const tooltipEl = getOrCreateTooltip(chart);
  30.   // Hide if no tooltip
  31.   if (tooltip.opacity === 0) {
  32.     tooltipEl.style.opacity = 0;
  33.     return;
  34.   }
  36.   // Set Text
  37.   if (tooltip.body) {
  38.     const titleLines = tooltip.title || [];
  39.     const bodyLines = tooltip.body.map(b => b.lines);
  41.     const tableHead = document.createElement('thead');
  43.     titleLines.forEach(title => {
  44.       const tr = document.createElement('tr');
  45.       tr.style.borderWidth = 0;
  47.       const th = document.createElement('th');
  48.       th.style.borderWidth = 0;
  49.       const text = document.createTextNode(title);
  51.       th.appendChild(text);
  52.       tr.appendChild(th);
  53.       tableHead.appendChild(tr);
  54.     });
  56.     const tableBody = document.createElement('tbody');
  57.     bodyLines.forEach((body, i) => {
  58.       const colors = tooltip.labelColors[i];
  60.       const span = document.createElement('span');
  61.       span.style.background = colors.backgroundColor;
  62.       span.style.borderColor = colors.borderColor;
  63.       span.style.borderWidth = '2px';
  64.       span.style.marginRight = '10px';
  65.       span.style.height = '10px';
  66.       span.style.width = '10px';
  67.       span.style.display = 'inline-block';
  69.       const tr = document.createElement('tr');
  70.       tr.style.backgroundColor = 'inherit';
  71.       tr.style.borderWidth = 0;
  73.       const td = document.createElement('td');
  74.       td.style.borderWidth = 0;
  76.       const text = document.createTextNode(body);
  78.       td.appendChild(span);
  79.       td.appendChild(text);
  80.       tr.appendChild(td);
  81.       tableBody.appendChild(tr);
  82.     });
  84.     const tableRoot = tooltipEl.querySelector('table');
  86.     // Remove old children
  87.     while (tableRoot.firstChild) {
  88.       tableRoot.firstChild.remove();
  89.     }
  91.     // Add new children
  92.     tableRoot.appendChild(tableHead);
  93.     tableRoot.appendChild(tableBody);
  94.   }
  96.   const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas;
  98.   // Display, position, and set styles for font
  99.   tooltipEl.style.opacity = 1;
  100.   tooltipEl.style.left = positionX + tooltip.caretX + 'px';
  101.   tooltipEl.style.top = positionY + tooltip.caretY + 'px';
  102.   tooltipEl.style.font = tooltip.options.bodyFont.string;
  103.   tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
  104. };

Docs