# 自定义 Tooltip

URL: https://caijiao.org/chartjs/06-advanced/04-custom-tooltip
Source: docs/chartjs/06-advanced/04-custom-tooltip.md
Description: 介绍如何在 Chart.js 中通过回调函数自定义 Tooltip 的内容和样式，实现更灵活和个性化的提示信息展示。

[Chart.js](/chartjs/) 提供了强大的 Tooltip 自定义功能。通过配置 `options.plugins.tooltip`，可以自定义 Tooltip 的显示内容、格式、样式等，满足不同场景需求。

以下示例演示如何使用回调函数自定义 Tooltip 显示的文本格式，包括添加单位和自定义标题。

```js
const ctx = document.getElementById("customTooltipChart").getContext("2d");

new Chart(ctx, {
  type: "line",
  data: {
    labels: ["一月", "二月", "三月", "四月", "五月"],
    datasets: [
      {
        label: "温度",
        data: [3, 6, 9, 7, 5],
        borderColor: "rgb(255, 99, 132)",
        backgroundColor: "rgba(255, 99, 132, 0.5)",
        fill: false,
        tension: 0.1,
      },
    ],
  },
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        callbacks: {
          title: function (context) {
            return "月份：" + context[0].label;
          },
          label: function (context) {
            return "温度：" + context.parsed.y + " °C";
          },
        },
      },
      legend: {
        display: true,
      },
    },
  },
});
```

[在线代码演示](/chartjs/demos/23.html)