Chart.js自定义tooltip高度无法自适应多行文本如何解决

Chart.js 内置的默认Tooltip本身支持根据内容自动调整尺寸，不需要手动编写高度自适应逻辑，出现高度不足、内容被截断的问题通常是配置错误导致，对应修复方法如下：

• 核对Label回调的返回值格式
  Tooltip的label回调如果需要渲染多行内容，必须返回由每行文本组成的字符串数组，不要自行拼接带\n换行符的长字符串，否则Tooltip内部的尺寸计算逻辑无法识别实际行数，会出现高度计算偏差、内容截断。
  正确的回调写法示例：

options: {
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          // 不要返回 "行1\n行2\n行3" 这类拼接了换行符的单字符串
          const lineList = []
          // 此处填充10-50行自定义提示内容，每个元素对应单独一行
          for (let i = 0; i < 30; i++) {
            lineList.push(`自定义提示第${i+1}行：对应业务数据内容`)
          }
          return lineList
        }
      }
    }
  }
}

• 移除硬编码的高度限制配置
  检查两处可能限制高度的配置：
  1. 移除Tooltip配置项中手动写死的height、maxHeight固定高度参数
  2. 检查自定义CSS样式，删除作用在.chartjs-tooltip类上的固定高度、overflow: hidden属性，这类配置会直接覆盖默认自适应逻辑。
• 特殊场景适配
  如果你配置了external参数使用自定义外部Tooltip（自行渲染DOM结构的模式），内置的自动尺寸计算逻辑不会生效，这种场景才需要手动根据渲染的文本行数计算并设置Tooltip容器高度，使用默认内置Tooltip不需要额外编写自适应逻辑。

补充说明：Chart.js 3.x及以上版本的回调参数已经调整，label回调第一个参数为统一的context对象，如果沿用2.x版本的(tooltipItem, data)参数写法，可能出现数据读取异常导致内容渲染错误，建议同步核对当前使用版本的API规范。

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