如何自定义Chart.js折线图的工具提示？

// 引入Chart.js库
import Chart from 'chart.js';

// 创建Canvas元素
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 定义自定义工具提示回调函数
const customTooltip = (tooltipModel) => {
  // 获取当前数据点的信息
  const dataPoint = tooltipModel.dataPoints[0];

  // 自定义工具提示的内容和样式
  let tooltipContent = '';
  if (dataPoint) {
    tooltipContent = `X轴值: ${dataPoint.xLabel}, Y轴值: ${dataPoint.yLabel}`;
  }

  // 更新工具提示的内容
  const tooltip = document.querySelector('.chartjs-tooltip');
  tooltip.innerHTML = tooltipContent;

  // 自定义工具提示的样式
  tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  tooltip.style.color = '#fff';
  tooltip.style.borderRadius = '4px';
  tooltip.style.padding = '6px';
  tooltip.style.position = 'absolute';
  tooltip.style.left = `${tooltipModel.caretX}px`;
  tooltip.style.top = `${tooltipModel.caretY}px`;
  tooltip.style.fontFamily = Chart.defaults.font.family;
  tooltip.style.fontSize = Chart.defaults.font.size;
  tooltip.style.fontStyle = Chart.defaults.font.style;
  tooltip.style.pointerEvents = 'none';
};

// 创建Chart实例
new Chart(canvas, {
  type: 'line',
  data: {
    // 数据配置
  },
  options: {
    tooltips: {
      enabled: false, // 禁用默认的工具提示
      custom: customTooltip, // 使用自定义的工具提示回调函数
    },
    // 其他配置项
  },
});