悬停在图表上时工具提示闪烁 [英] Tooltip flickering when hovered on chart

问题描述

我已经在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';
...

这篇关于悬停在图表上时工具提示闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！