用途:系统讲解 Chart.js(v4.5.1)中工具提示的配置与自定义,适用于需要调整悬停提示样式、内容或实现完全自定义 HTML 提示框的场景。
主要能力:配置项位于 options.plugins.tooltip,可设置 enabled、external、mode、intersect、position、background/title/body/border 颜色与宽度、cornerRadius、caretSize、displayColors、boxWidth、boxHeight、usePointStyle、xAlign/yAlign、rtl 等。回调位于 options.plugins.tooltip.callbacks,包括 title、label、footer 及 before/after 系列,以及 labelColor、labelTextColor、labelPointStyle;部分回调可在 data.datasets[].tooltip.callbacks 中按数据集覆盖。交互模式支持 point、nearest、index、dataset、x、y。position 支持 average、nearest 或自定义位置器,可通过 Tooltip.positioners 注册,并提供 TypeScript 声明示例。
使用方式:在 options.plugins.tooltip 内设置选项和 callbacks;如需 HTML 提示框,将 enabled 设为 false 并用 external 指定处理函数,函数内创建 DOM 元素并按 tooltip.caretX/caretY 定位。框架方面给出 react-chartjs-2 与 vue-chartjs 的示例。示例还包括货币格式化、百分比计算、多行标签、自定义标题与页脚、整体或按数据集禁用提示。
限制:资料未提供安装命令、版本兼容范围之外的依赖说明或性能注意事项;具体项目需自行验证。