本文介绍了悬停在图表上时工具提示闪烁的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经在chartjs中为我的图表创建了自定义工具提示。但是问题出在我将鼠标悬停在图表上时,工具提示开始闪烁。谁知道我该如何预防?
I have created custom tooltip for my chart in chartjs. But the issue comes when I hover on the chart, the tooltip starts flickering. Anyone knows how can I prevent this? Thanks!
if (!tooltip) {
var tooltip = document.createElement('div');
tooltip.id = 'tooltip';
document.body.appendChild(tooltip);
}
if (!model.opacity) {
tooltip.style.display = 'none';
return;
}
tooltip.innerHTML = `<div class="tooltip-body">
<label>` + model.body[0].lines[0] + `</label>
</div>
<div class="tooltip-caret"></div>`;
tooltip.style.display = 'inline-block';
tooltip.style.position = 'absolute';
tooltip.style.top = getTooltipPosition().y + 'px';
tooltip.style.left = getTooltipPosition().x + 'px';
推荐答案
TRY设置样式-到 none
,例如:
TRY setting style - pointer-events
to none
, for the tool-tip element, like so :
...
tooltip.style.pointerEvents = 'none';
...
这篇关于悬停在图表上时工具提示闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!