Chart.js ChartJS条形图-即使光标在条形图之外，也会触发悬停

我用ChartJS创建了一个条形图，并实现了一个自定义工具提示，显示为悬停两周。工具提示仅在我将鼠标悬停在特定栏上时显示，这是正常的默认行为。我需要实现的是触发工具提示，即使我的光标在一个条之外（当然仍然在画布中）。我想将鼠标悬停在任何白色区域（如屏幕截图所示）上，但仍会触发工具提示

我一直在考虑获取最近条的最近坐标，并以编程方式触发工具提示，但我还没有找到这种方法的解决方案

到目前为止，我发现了这个通用的

悬停
事件回调：

var options = {
   hover: {onHover: function (event, chartElement) {
      if (chartElement.length === 0) {
          // chartElement[0] appears to be the currently active element if I hover a bar.
          // Otherwise it's just an empty array.
      }
   }
}

非常感谢您的帮助。谢谢
 可以通过设置工具提示配置模式并按如下方式相交来实现所需：

options: {
  tooltips: {
    enabled: false,
    mode: 'index',
    position: 'nearest',
    intersect: false,
    custom: customTooltips
  }
} 

例如：


var customTooltips=函数（工具提示）{
//工具提示元素
var tooltipEl=document.getElementById（'chartjs-tooltip'）；
如果（！工具管）{
tooltipEl=document.createElement（'div'）；
tooltipEl.id='chartjs tooltip'；
tooltipEl.innerHTML=''；
这个.u图表.canvas.parentNode.appendChild（工具管道）；
}
//如果没有工具提示，则隐藏
如果（tooltip.opacity==0）{
tooltipEl.style.opacity=0；
返回；
}
//设置插入符号位置
移除（'Upper'、'Down'、'no transform'）；
如果（工具提示.yAlign）{
添加（tooltip.yAlign）；
}否则{
tooltipEl.classList.add（'no-transform'）；
}
函数getBody（bodyItem）{
返回bodyItem.line；
}
//设置文本
if（tooltip.body）{
var titleLines=tooltip.title | |[]；
var bodyLines=tooltip.body.map（getBody）；
var innerHtml=''；
标题行。forEach（函数（标题）{
innerHtml+=''+标题+''；
});
innerHtml+=''；
bodyLines.forEach（函数（body，i）{
var colors=tooltip.labelColors[i]；
var style='background:'+colors.backgroundColor；
样式+='；边框颜色：'+colors.borderColor；
样式+='；边框宽度：2px'；
var span=''；
innerHtml+=''+span+body+''；
});
innerHtml+=''；
var tableRoot=tooltipEl.querySelector（'table'）；
tableRoot.innerHTML=innerHTML；
}
var positionY=此。_chart.canvas.offsetTop；
var positionX=此。_chart.canvas.offsetLeft；
//显示、定位和设置字体样式
tooltipEl.style.opacity=1；
tooltipEl.style.left=positionX+tooltip.caretX+'px'；
tooltipEl.style.top=positionY+tooltip.caretY+'px'；
ToolTipe.style.fontFamily=工具提示。\u bodyFontFamily；
tooltipEl.style.fontSize=tooltip.bodyFontSize+'px'；
tooltipEl.style.fontStyle=工具提示。\u bodyFontStyle；
tooltipEl.style.padding=tooltip.yPadding+'px'+tooltip.xPadding+'px'；
};
变量选项={
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
边框宽度：1，
填充：假，
边框颜色：“红色”，
背景颜色：“红色”
}]
},
选项：{
工具提示：{
启用：false，
模式：“索引”，
位置：'最近'，
交集：错，
自定义：自定义工具提示
}
}
}
var ctx=document.getElementById（'chartJSContainer'）.getContext（'2d'）；
新图表（ctx，选项）
画布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
#chartjs工具提示{
不透明度：1；
位置：绝对位置；
背景：rgba（0,0,0,7）；
颜色：白色；
边界半径：3px；
-webkit过渡：所有.1s易用性；
过渡：全部1秒轻松；
指针事件：无；
-webkit转换：转换（-50%，0）；
转换：转换（-50%，0）；
}
.chartjs工具提示键{
显示：内联块；
宽度：10px；
高度：10px；
右边距：10px；
}
可以通过设置工具提示配置模式并按如下方式相交来实现所需：

options: {
  tooltips: {
    enabled: false,
    mode: 'index',
    position: 'nearest',
    intersect: false,
    custom: customTooltips
  }
} 

例如：


var customTooltips=函数（工具提示）{
//工具提示元素
var tooltipEl=document.getElementById（'chartjs-tooltip'）；
如果（！工具管）{
tooltipEl=document.createElement（'div'）；
tooltipEl.id='chartjs tooltip'；
tooltipEl.innerHTML=''；
这个.u图表.canvas.parentNode.appendChild（工具管道）；
}
//如果没有工具提示，则隐藏
如果（tooltip.opacity==0）{
tooltipEl.style.opacity=0；
返回；
}
//设置插入符号位置
移除（'Upper'、'Down'、'no transform'）；
如果（工具提示.yAlign）{
添加（tooltip.yAlign）；
}否则{
tooltipEl.classList.add（'no-transform'）；
}
函数getBody（bodyItem）{
返回bodyItem.line；
}
//设置文本
if（tooltip.body）{
var titleLines=tooltip.title | |[]；
var bodyLines=tooltip.body.map（getBody）；
var innerHtml=''；
标题行。forEach（函数（标题）{
innerHtml+=''+标题+''；
});
innerHtml+=''；
bodyLines.forEach（函数（body，i）{
var colors=tooltip.labelColors[i]；
var style='background:'+colors.backgroundColor；
样式+='；边框颜色：'+colors.borderColor；
样式+='；边框宽度：2px'；
var span=''；
innerHtml+=''+span+body+''；
});
innerHtml+=''；
var tableRoot=tooltipEl.querySelector（'table'）；
tableRoot.innerHTML=innerHTML；
}
var positionY=此。_chart.canvas.offsetTop；
var positionX=此。_chart.canvas.offsetLeft；
//显示、定位和设置字体样式
tooltipEl.style.opacity=1；
tooltipEl.style.left=positionX+tooltip.caretX+'px'；
tooltipEl.style.top=positionY+tooltip.caretY+'px'；
ToolTipe.style.fontFamily=工具提示。\u bodyFontFamily；
tooltipEl.style.fontSize=tooltip.bodyFontSize+'px'；
tooltipEl.style.fontStyle=工具提示。\u bodyFontStyle；
tooltipEl.style.padding=工具提示。