Блог

Я добавил <a> тег к своей пользовательской всплывающей подсказке, но когда я нажимаю на него, он не перенаправляет на href.

Я скопировал пользовательскую всплывающую подсказку именно из этих документов. Я также вставлю приведенный ниже код для удобства.

Затем я добавил следующий innerHTML:

 var tableRoot = tooltipEl.querySelector("table");
    tableRoot.innerHTML = innerHtml   '<a href="www.google.com">Click Here</a>';
  

Однако ссылка не является интерактивной — она даже не запускается, cursor: pointer как обычный <a> тег.

Полный пользовательский код всплывающей подсказки:

 custom: function(tooltipModel) {
            // Tooltip Element
            var tooltipEl = document.getElementById('chartjs-tooltip');

            // Create element on first render
            if (!tooltipEl) {
                tooltipEl = document.createElement('div');
                tooltipEl.id = 'chartjs-tooltip';
                tooltipEl.innerHTML = '<table></table>';
                document.body.appendChild(tooltipEl);
            }

            // Hide if no tooltip
            if (tooltipModel.opacity === 0) {
                tooltipEl.style.opacity = 0;
                return;
            }

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

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

            // Set Text
            if (tooltipModel.body) {
                var titleLines = tooltipModel.title || [];
                var bodyLines = tooltipModel.body.map(getBody);

                var innerHtml = '<thead>';

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

                bodyLines.forEach(function(body, i) {
                    var colors = tooltipModel.labelColors[i];
                    var style = 'background:'   colors.backgroundColor;
                    style  = '; border-color:'   colors.borderColor;
                    style  = '; border-width: 2px';
                    var span = '<span style="'   style   '"></span>';
                    innerHtml  = '<tr><td>'   span   body   '</td></tr>';
                });
                innerHtml  = '</tbody>';

                var tableRoot = tooltipEl.querySelector('table');
                tableRoot.innerHTML = innerHtml;
            }

            // `this` will be the overall tooltip
            var position = this._chart.canvas.getBoundingClientRect();

            // Display, position, and set styles for font
            tooltipEl.style.opacity = 1;
            tooltipEl.style.position = 'absolute';
            tooltipEl.style.left = position.left   window.pageXOffset   tooltipModel.caretX   'px';
            tooltipEl.style.top = position.top   window.pageYOffset   tooltipModel.caretY   'px';
            tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
            tooltipEl.style.fontSize = tooltipModel.bodyFontSize   'px';
            tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
            tooltipEl.style.padding = tooltipModel.yPadding   'px '   tooltipModel.xPadding   'px';
            tooltipEl.style.pointerEvents = 'none';
        }
  

Удалить

         tooltipEl.style.pointerEvents = 'none';
  

и любой из них из CSS

         pointer-events: none;
  

Я сам столкнулся с этой проблемой, поэтому попытался удалить эту строку:

 tooltipEl.style.pointerEvents = 'none';
  

но это не сработало так, как ожидалось — каждый раз, когда я наводил курсор на всплывающую подсказку, она исчезала.

Затем я попробовал это:

1. Оставьте строку выше такой, какая она есть;

2. Измените events реквизит options . (См. Документы). Делая это, вы фактически удаляете событие ‘mouseout’ из конфигурации по умолчанию.

    const options = {
            maintainAspectRatio: false,
            events: ['mousemove', 'click', 'touchstart', 'touchmove'],
            plugins: {
                tooltip: {
                    enabled: false,
                    external: externalTooltipHandler
                },
                legend: {
                    display: false
                }
            },
        }
     

3. Затем удалите события указателя из единственного интерактивного элемента всплывающей подсказки. В моем случае это li элемент. Я сделал это с помощью CSS. li { pointer-events: auto; }

После завершения 1-3 шагов внешняя всплывающая подсказка должна вести себя так, как ожидалось, и элементы ссылок, содержащиеся в этой подсказке, должны быть интерактивными.