Question

在遵循了这里的一些指南以及官方文档中的内容之后，我完全被困住了。

我有一些自定义工具提示，这些提示会根据自定义工具提示中的数据名称在其中显示PNG图形。

我发现了几种隐藏工具提示或将其设置为始终显示的解决方案，但是它们似乎都不起作用。我希望隐藏标准工具提示，并且始终显示我的自定义工具提示。

我的代码如下：

HTML：

<canvas id="pelagic" style="width:10vw;height:10vw;"></canvas>
<div id="chartjs-tooltip">
     <table></table>
</div>

CSS：

#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
}

JavaScript

var ctx4 = document.getElementById("pelagic").getContext('2d');
var seafood_pelagic = {
    "labels":["Welsh Fleet Mackerel","Herring","Other Pelagic"],
    "datasets":[
        {
            "label":"2013",
            "data":["1.90","0.50","0.30","0.30","0.30"],
            "backgroundColor":["#95c11e","#007e3b","#3aa935","#14af97","#88f88f"],
            "borderWidth": "2",
            "borderColor":["#95c11e","#007e3b","#3aa935","#14af97","#88f88f"]
        }
        ]
};

var seafood_pelagic = new Chart(ctx4, {
    type: 'doughnut',
    data: seafood_pelagic,
    options: {
        showAllTooltips: true,
        cutoutPercentage: 85,
        responsive: false,
        animation: false,
        legend: {
            display: false
        },
        tooltips: {
            enabled: false,
            callbacks: {
                label: function(tooltipItem, data) { 
                    var indice = tooltipItem.index;                 
                    return  data.labels[indice];
                }
            },
            custom: customTooltips
        }
    }
});

var customTooltips = function(tooltip) {
    // Tooltip Element
    var tooltipEl = document.getElementById('chartjs-tooltip');
        // Hide if no tooltip
        if (tooltip.opacity === 0) {
            tooltipEl.style.opacity = 1;
            return;
        }
    if (!tooltipEl) {
        tooltipEl = document.createElement('div');
        tooltipEl.id = 'chartjs-tooltip';
        tooltipEl.innerHTML = '<table></table>';
        this._chart.canvas.parentNode.appendChild(tooltipEl);
            tooltipEl.style.opacity = 1;
    }
    function getBody(bodyItem) {
        return bodyItem.lines;
    }
    // Set Text
    if (tooltip.body) {
        var titleLines = tooltip.title || [];
        var bodyLines = tooltip.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 = tooltip.labelColors[i];
            var style = 'background:' + colors.backgroundColor;
            style += '; border-color:' + colors.borderColor;
            style += '; border-width: 2px';
            var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
            innerHtml += '<tr><td><img src="../images/' + body + '-pelagic.png">' + span +  '</td></tr>';
        });
        innerHtml += '</tbody>';

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

    var positionY = this._chart.canvas.offsetTop;
    var positionX = this._chart.canvas.offsetLeft;

    // Display, position, and set styles for font
    tooltipEl.style.opacity = 1;
    tooltipEl.style.left = positionX + tooltip.caretX + 'px';
    tooltipEl.style.top = positionY + tooltip.caretY + 'px';
    tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
    tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
    tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
    tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};

有什么想法吗？它可以在悬停时显示图像的范围内起作用，并且图像不会消失，直到您将鼠标悬停在甜甜圈的下一个切片上（而不是像通常那样立即消失）。我准备把头撞在砖墙上！

Answer 1

我遇到了类似的问题-我的自定义工具提示确实弹出了，但是并没有自动消失。我发现工具提示“回调”和“自定义”配置不能一起使用。我不知道这是设计使然还是错误。

在下面的配置中，您将必须删除“回调”部分。您松开了标签的格式，因此您的自定义工具提示组件应随后进行更新/更改，以便在那里进行格式设置。）

 tooltips: {
        enabled: false,
        callbacks: {
            label: function(tooltipItem, data) { 
                var indice = tooltipItem.index;                 
                return  data.labels[indice];
            }
        },
        custom: customTooltips
    }

Answer 2

哦，我想已经晚了，但是其他人可以找到您的代码有用，所以我不得不说这是一个小小的错误：

if (tooltip.opacity === 0) {
    tooltipEl.style.opacity = 1;
    return;
}

您必须将工具提示元素opacity设置为0！ ?

始终显示ChartJS自定义工具提示

2 个答案: