ChartJS tooltip内容溢出如何添加滚动条避免被画布遮挡？

问题原因 #

ChartJS默认的tooltip是直接在canvas画布上绘制的，内容边界受画布大小限制，内容过多时会自动裁剪，无法通过普通样式添加滚动条。你需要改用外部自定义DOM tooltip，将tooltip渲染到canvas之外的DOM节点上，再通过CSS控制滚动效果。

具体实现步骤 #

1. 调整Chart配置，开启自定义tooltip #

注意：以下分ChartJS v3/v4 版本和v2版本两种配置，根据你使用的版本选择即可

适配ChartJS v3/v4 版本配置

options: {
  responsive: true,
  plugins: {
    tooltip: {
      enabled: false, // 关闭原生canvas tooltip
      external: (context) => {
        const tooltip = context.tooltip;
        let tooltipEl = document.getElementById('chartjs-tooltip');

        // 不存在则创建tooltip元素
        if (!tooltipEl) {
          tooltipEl = document.createElement('div');
          tooltipEl.id = 'chartjs-tooltip';
          document.body.appendChild(tooltipEl);
        }

        // 隐藏时直接设不显示
        if (tooltip.opacity === 0) {
          tooltipEl.style.opacity = 0;
          return;
        }

        // 处理tooltip内容，适配你原来的label回调逻辑
        let contentHtml = '';
        const item = ["Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1"]
        item.forEach(single => {
          contentHtml += `<div class="tooltip-item">${single}</div>`
        })
        tooltipEl.innerHTML = contentHtml;

        // 设置定位
        const position = context.chart.canvas.getBoundingClientRect();
        tooltipEl.style.opacity = 1;
        tooltipEl.style.position = 'absolute';
        tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px';
        tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px';
        tooltipEl.style.pointerEvents = 'none';
      }
    }
  }
}

适配ChartJS v2 版本配置（对应你给出的配置版本）

options: {
  responsive: true,
  tooltips: {
    enabled: false, // 关闭原生tooltip
    custom: (tooltip) => {
      let tooltipEl = document.getElementById('chartjs-tooltip');
      if (!tooltipEl) {
        tooltipEl = document.createElement('div');
        tooltipEl.id = 'chartjs-tooltip';
        document.body.appendChild(tooltipEl);
      }
      if (tooltip.opacity === 0) {
        tooltipEl.style.opacity = 0;
        return;
      }
      // 内容渲染逻辑和v3一致
      const item = ["Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1", "Test1"]
      let contentHtml = '';
      item.forEach(single => {
        contentHtml += `<div class="tooltip-item">${single}</div>`
      })
      tooltipEl.innerHTML = contentHtml;
      // 定位设置
      const position = tooltip.chart.canvas.getBoundingClientRect();
      tooltipEl.style.opacity = 1;
      tooltipEl.style.position = 'absolute';
      tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px';
      tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px';
    }
  }
}

2. 添加对应CSS样式，实现滚动效果 #

#chartjs-tooltip {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  z-index: 9999; /* 保证浮在最上层不被遮挡 */
  max-height: 200px; /* 自定义最大高度，超过就出现滚动条 */
  overflow-y: auto; /* 垂直方向超出自动加滚动条 */
}
#chartjs-tooltip .tooltip-item {
  padding: 2px 0;
}
/* 可选：自定义滚动条样式 */
#chartjs-tooltip::-webkit-scrollbar {
  width: 6px;
}
#chartjs-tooltip::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.5);
  border-radius: 3px;
}

效果验证 #

修改后tooltip会作为独立DOM元素渲染在body下，不受canvas边界限制，内容超过设定的max-height时会自动出现滚动条，不会被遮挡，解决你遇到的如下溢出问题：

内容的提问来源于stack exchange，提问作者MPK