我之前也碰到过一模一样的情况——用tooltip.filter过滤掉指定内容后，居然还残留黑色边框，这大概率是两个原因：要么是你的判断逻辑没精准命中目标segment，要么是旧版Chart.js的filter只处理tooltip内容，不处理容器渲染。下面给你两个可行的解决方案：

方案1：修正Filter判断逻辑（优先尝试） #

你当前用tooltipItem.xLabel来判断是否是"Free Slot"，但对于环形图（doughnut）来说，xLabel并不是你设置的项目名称，正确的做法是从对应dataset的label数组里取当前segment的名称：

options: {
  // ...其他配置
  tooltips: {
    filter: function (tooltipItem, data) {
      // 获取当前点击segment对应的项目名称
      const currentLabel = data.datasets[tooltipItem.datasetIndex].label[tooltipItem.index];
      // 非"Free Slot"才显示tooltip
      return currentLabel !== "Free Slot";
    },
    // 保留你原有的callbacks配置
    callbacks: {
      label: function (tooltipItems, data) {
        return data.datasets[tooltipItems.datasetIndex].label[tooltipItems.index];
      },
      afterLabel: function (tooltipItems, data) {
        return Math.floor(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] / 6) + 'h ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] * 10 % 60 + 'm';
      }
    }
  }
}

这个方案能解决大部分情况，因为它精准过滤了整个tooltip的触发，而不是只隐藏内容。

方案2：用Custom Tooltip完全控制渲染（针对顽固情况） #

如果修正逻辑后还是有边框残留，说明你的Chart.js版本对filter的处理不够彻底，这时候可以用custom配置完全接管tooltip的渲染，遇到"Free Slot"时直接隐藏整个容器：

options: {
  // ...其他配置
  tooltips: {
    custom: function(tooltipModel) {
      // 判断当前tooltip是否对应"Free Slot"
      if (tooltipModel.body && tooltipModel.body.length > 0) {
        const labelText = tooltipModel.body[0].lines[0];
        if (labelText === "Free Slot") {
          // 完全隐藏tooltip容器
          tooltipModel.opacity = 0;
          // 找到默认tooltip元素并隐藏
          const defaultTooltip = document.querySelector('.chartjs-tooltip');
          if (defaultTooltip) defaultTooltip.style.display = 'none';
          return;
        }
      }
      // 其他情况正常显示tooltip
      tooltipModel.opacity = 1;
      const defaultTooltip = document.querySelector('.chartjs-tooltip');
      if (defaultTooltip) defaultTooltip.style.display = 'block';
    },
    // 保留原有的callbacks配置
    callbacks: {
      label: function (tooltipItems, data) {
        return data.datasets[tooltipItems.datasetIndex].label[tooltipItems.index];
      },
      afterLabel: function (tooltipItems, data) {
        return Math.floor(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] / 6) + 'h ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] * 10 % 60 + 'm';
      }
    }
  }
}

注意事项：Chart.js版本差异 #

如果你使用的是Chart.js 3.x及以上版本，tooltip的配置结构发生了变化，需要把tooltips移到options.plugins.tooltip下：

options: {
  plugins: {
    tooltip: {
      filter: function (tooltipItem, data) {
        const currentLabel = data.datasets[tooltipItem.datasetIndex].label[tooltipItem.index];
        return currentLabel !== "Free Slot";
      },
      // 其他配置...
    }
  }
}

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