ChartJS自定义Tooltip内链接无法点击问题求助

嘿，我一眼就揪出问题根源了——你的tooltip元素设置了pointerEvents: none，这会让整个tooltip容器直接忽略所有鼠标交互，包括点击链接、鼠标悬停的指针样式全都会失效！

问题拆解 #

看你代码最后一行：

tooltipEl.style.pointerEvents = 'none';

这个CSS属性会阻止tooltip内所有元素接收任何鼠标事件，所以你的<a>标签自然没法触发跳转，连鼠标放上去变指针的效果都出不来。

两步修复方案 #

1. 调整pointerEvents的作用范围
   如果你直接把pointerEvents: none改成auto，虽然能让链接工作，但tooltip会遮挡图表的交互（比如鼠标hover其他数据点）。更稳妥的做法是让tooltip容器保持pointerEvents: none，只给内部的表格开启鼠标交互：

   var tableRoot = tooltipEl.querySelector('table');
   tableRoot.style.pointerEvents = 'auto'; // 只让表格区域响应鼠标事件
   

2. 修正标签的href路径
   你写的href="www.google.com"会被浏览器当成当前域名下的相对路径，必须加上协议前缀https://才能跳转到正确的外部网站：

   tableRoot.innerHTML = innerHtml + '<a href="https://www.google.com">Click Here</a>';
   

修改后的关键代码片段 #

// ... 其他原有代码保持不变 ...

var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml + '<a href="https://www.google.com">Click Here</a>';
tableRoot.style.pointerEvents = 'auto'; // 新增这行开启表格的鼠标交互

// `this` will be the overall tooltip
var position = this._chart.canvas.getBoundingClientRect();

// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
tooltipEl.style.pointerEvents = 'none'; // 保留这行，避免tooltip遮挡图表交互

这样改完之后，你的链接就能正常跳转，鼠标悬停时也会显示指针样式了。

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