Создать интерактивную пользовательскую подсказку для chartjs

Question

Я использую 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
                        });
                    }
                }
            }),
        });