如何让Chart.js自定义Tooltip可滚动？添加滚动条后无法滚动

问题根源 #

你的自定义Tooltip显示滚动条但无法滚动的核心原因有两个：

• pointerEvents: 'none' 禁用了鼠标交互：Tooltip元素设置了该属性后，会完全不响应任何鼠标事件，包括滚动操作，导致滚动条形同虚设。
• 内部表格布局未限制：默认<table>元素会根据内容自动撑开高度，可能导致Tooltip的maxHeight设置无法正确生效，滚动区域计算不符合预期。

修复步骤 #

1. 启用指针事件
   在getOrCreateTooltip函数中，将tooltipEl.style.pointerEvents从'none'改为'auto'，让Tooltip可以接收鼠标滚动事件：

const getOrCreateTooltip = (chart: any) => {
    let tooltipEl = chart.canvas.parentNode.querySelector('div');

    if (!tooltipEl) {
        tooltipEl = document.createElement('div');
        tooltipEl.style.background = 'rgba(0, 0, 0, 0.7)';
        tooltipEl.style.borderRadius = '3px';
        tooltipEl.style.color = 'white';
        tooltipEl.style.opacity = 1;
        tooltipEl.style.pointerEvents = 'auto'; // 替换原有的'none'
        tooltipEl.style.position = 'absolute';
        tooltipEl.style.transform = 'translate(-50%, 0)';
        tooltipEl.style.transition = 'all .1s ease';

        const table = document.createElement('table');
        table.style.margin = '0px';

        tooltipEl.appendChild(table);
        chart.canvas.parentNode.appendChild(tooltipEl);
    }

    return tooltipEl;
};

2. 优化内部表格布局（可选但推荐）
   为了确保滚动区域高度计算准确，给内部表格添加样式限制，避免内容过度撑开容器：
   在externalTooltipHandler函数中，找到获取tableRoot的部分，添加以下样式：

const tableRoot = tooltipEl.querySelector('table');
// 调整表格布局以适配滚动容器
tableRoot.style.display = 'block';
tableRoot.style.maxHeight = 'calc(400px - 2*' + tooltip.options.padding + 'px)';
tableRoot.style.overflowY = 'auto';

3. 统一滚动样式设置
   确保在需要滚动的场景下正确配置滚动属性，比如保留原有datasetIndex判断的同时，确保样式设置完整：

if (datasetIndex === 0) {
    tooltipEl.style.top = positionY + 'px';
    tooltipEl.style.maxHeight = "400px";
    tooltipEl.style.overflowY = "auto";
    tooltipEl.style.scrollBehavior = "smooth";
} else {
    tooltipEl.style.top = positionY + tooltip.caretY + 'px';
    // 若其他数据集也需要滚动，可在此添加相同的滚动样式
}

验证效果 #

修改完成后，Tooltip将能够正常响应鼠标滚动操作，滚动条可以拖拽，鼠标滚轮也能控制内容上下滚动。

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