Chart.js 鼠标悬停时怎么自定义 tooltip 样式？

打工人金梅提问于 2026-02-27 12:45:21 阅读 38

交互

我用 Chart.js 画了个折线图，但默认的 tooltip 太丑了，想改一下背景色和字体大小，试了文档里的 options.plugins.tooltip 回调，但样式根本没变，是不是哪里写错了？

我的配置大概是这样：

const config = {
  type: 'line',
  data: data,
  options: {
    plugins: {
      tooltip: {
        backgroundColor: '#ff6b6b',
        titleFont: { size: 18 },
        bodyFont: { size: 14 }
      }
    }
  }
};

可 tooltip 还是原来的样子，完全没生效，是不是属性名写错了？还是版本问题？

Chart.js 图表可视化

我来解答赞 8 收藏

反馈

2 条解答

轩辕红静 Lv1

你应该是 Chart.js 2.x 版本吧？2.x 的 tooltip 配置是放在 options.tooltip 下，不是 options.plugins.tooltip。3.x 以上才是你现在这么写的结构。

先确认下版本：

console.log(Chart.version);

如果是 2.x 版本，改成这样：

const config = {

  type: 'line',

  data: data,

  options: {

    tooltips: {  // 注意这里是 tooltips（复数）

      backgroundColor: '#ff6b6b',

      titleFontSize: 18,

      bodyFontSize: 14

    }

  }

};

如果是 3.x 或 4.x，那你的写法没问题，检查下是不是有其他地方覆盖了这个配置。

2026-03-19 22:06

Air-之芳 Lv1

你这个配置其实写得没问题，问题大概率出在 Chart.js 的版本上。
如果你用的是 v3 或 v4，那 plugins.tooltip 里的配置项确实要这么写，但有个坑：Chart.js 默认的 tooltip 样式是通过 CSS 控制的，光改配置里的字体、背景色不一定能立刻生效，特别是当页面里有全局样式覆盖的时候。

一般这样处理：
先确认你用的是 Chart.js v3+，然后在配置里加上 external 回调来完全接管 tooltip 渲染，或者更简单的——直接加个全局 CSS 覆盖默认样式：

/* 覆盖默认 tooltip 样式 */

.chartjs-tooltip {

  background-color: rgba(255, 107, 107, 0.9) !important;

  font-size: 14px !important;

}

.chartjs-tooltip-key {

  display: none; /* 如果不需要颜色小圆点 */

}

如果你坚持用配置方式改（推荐），确保这样写（v3+ 写法）：

options: {

  plugins: {

    tooltip: {

      backgroundColor: '#ff6b6b',

      titleFont: { size: 18, weight: 'bold' },

      bodyFont: { size: 14 },

      padding: 10,

      displayColors: false

    }

  }

}

注意 titleFont 和 bodyFont 的值要写成对象，别写成字符串（比如 '18px' 就错了）。
如果还是没生效，检查下浏览器开发者工具里 tooltip 元素的 class 是不是 chartjs-tooltip，有没有被其他 CSS 覆盖，或者你是不是用的 CDN 版本没更新到最新（老版本 v2 的写法是 tooltips 而不是 plugins.tooltip）。

v2 和 v3 写法差异很大，如果你不确定版本，可以看下 package.json 或 CDN 链接里是不是 3.x 或 4.x，别用着老文档配新版本。

2026-02-27 13:01