为 chartjs 创建交互式自定义工具提示答案

【问题标题】：Create an interactive custom tooltip for chartjs为 chartjs 创建交互式自定义工具提示
【发布时间】：2019-11-20 00:23:18
【问题描述】：

我正在使用chartjs 2.8，并为它创建了一些自定义的 html 工具提示，现在我需要使 tooltip 具有交互性（又名 - 可悬停、可点击等...）

问题是chartjs只显示工具提示，而我将鼠标悬停在我想在工具提示中看到的数据点上，一旦我将鼠标悬停在外面进入工具提示，它就会消失。

我已经尝试检查 chartjs 文档以获取一些选项解决方案，但找不到任何有用的\工作。

我一直在考虑使用我的customTooltip function，所以它只会在tooltipModel.opacity===0 并且鼠标离开工具提示时消失，但我在这里遇到了一些困难

this.tooltip = $('<div/>').addClass('chartjs-tooltip')[0];
        document.body.appendChild(this.tooltip);

        return new Chart($chart, {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets,
                cubicInterpolationMode: 'monotone'
            },
            options: Object.assign({}, options, {
                tooltips: {
                    // Disable the on-canvas tooltip
                    enabled: false,

                    custom: (tooltipModel) => {
                        // Hide if no tooltips
                        if (tooltipModel.opacity === 0) {
                            $(this.tooltip).empty().removeClass('visible');
                            return;
                        } else {
                            $(this.tooltip).addClass('visible');
                        }

                        // Set caret Position
                        this.tooltip.classList.remove('above', 'below', 'no-transform');
                        if (tooltipModel.yAlign) {
                            this.tooltip.classList.add(tooltipModel.yAlign);
                        } else {
                            this.tooltip.classList.add('no-transform');
                        }

                        function getBody(bodyItem) {
                            return bodyItem.lines;
                        }

                        // Set Text
                        if ( empty_datapoint ) {
                            if (tooltipModel.body) {
                                this.tooltip.innerHTML = '<table></table>';
                                let titleLines = tooltipModel.title || [];
                                let bodyLines = tooltipModel.body.map(getBody);

                                let innerHtml = '<thead>';

                                titleLines.forEach(function(title) {
                                    innerHtml += '<tr><th>' + title + '</th></tr>';
                                });
                                innerHtml += '</thead><tbody>';

                                bodyLines.forEach(function(body, i) {
                                    let colors = tooltipModel.labelColors[i];
                                    let style = 'background:' + colors.backgroundColor + ';';
                                    let span = '<span class="color-box" style="' + style + '"></span>';
                                    innerHtml += '<tr><td>' + span + body + '</td></tr>';
                                });
                                innerHtml += '</tbody>';

                                let tableRoot = this.tooltip.querySelector('table');
                                tableRoot.innerHTML = innerHtml;
                                this.tooltip.addStyles({
                                    backgroundColor: 'rgba(0,0,0,0.8)',
                                    borderRadius: '6px',
                                    color: '#fff',
                                    fontFamily: tooltipModel._bodyFontFamily,
                                    fontSize: tooltipModel.bodyFontSize + 'px',
                                    fontStyle: tooltipModel._bodyFontStyle,
                                });
                            }
                        } else {
                            let $tooltip = this.customTooltip(tooltipModel.dataPoints);
                            $('.chartjs-tooltip').html($tooltip);
                            tooltipModel.caretX += -150;
                        }

                        // `this` will be the overall tooltip
                        let position = this.chart.$el.canvas.getBoundingClientRect();

                        // Display, position, and set styles for font
                        this.tooltip.addStyles({
                            position: 'absolute',
                            left: position.left + window.pageXOffset + tooltipModel.caretX + 'px',
                            top: position.top + window.pageYOffset + tooltipModel.caretY + 'px',
                            padding: tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px',
                            zIndex: 9999999999,
                            // pointerEvents: 'none'; // pretty sure we'll want pointer event in the future
                        });
                    }
                }
            }),
        });

【问题讨论】：

我已经接近你想要的了，方法是在工具提示上放置一个onMouseLeave 事件处理程序以在鼠标离开工具提示而不是点时隐藏它。
我忽略鼠标离开这样的点：if (tooltip.opacity === 0) { return; } 这使工具提示在用户与之交互时保持可见。不幸的是，如果鼠标在未进入工具提示的情况下离开图表点，则工具提示仍然可见。
Tnx 回复，我已经找到了解决方案。我正在听 - 鼠标离开包含工具提示的元素，它没有连接到主体，而是连接到图表的容器，不透明度更改为 0 我设置了 200 毫秒的超时以检查鼠标悬停在工具提示上，如果有到目前为止，我没有隐藏它的效果很好

标签： javascript hover chart.js tooltip interactive

【解决方案1】：

    let tooltipEl = document.getElementById('chartjs-tooltip');

    if (!tooltipEl) {
      tooltipEl = document.createElement('div');
      tooltipEl.id = 'chartjs-tooltip';
      tooltipEl.innerHTML = `<table></table>`;
      document.body.appendChild(tooltipEl);

      tooltipEl.addEventListener('mouseleave', () => {
        tooltipEl.style.opacity = 0;
      });
      tooltipEl.addEventListener('mouseenter', () => {
        tooltipEl.style.opacity = 1;
      });

您还可以在 afterEvent 挂钩中控制工具提示的可见性。

    plugins: [
      {
        id: 'turnOffTooltipPlugin',
        afterEvent(chart, args, pluginOptions) {
          const { event } = args;

          if (event.native.type === 'mouseout') {
            let tooltipEl = document.getElementById('chartjs-tooltip');

           if (tooltipEl) {
             tooltipEl.style.opacity = 0;
           }
        }
      }
     ]

【讨论】：