Блог

При наведении курсора мыши на всплывающую подсказку цвет фона исчезает при перемещении мыши из всплывающей подсказки. Любая помощь будет очень признательна.

Я пытаюсь понять, какой код создает этот странный эффект. Я перепробовал почти все возможные решения.

Спасибо 🙂

Вот код, который я использовал для выравнивания правой стороны метки:

   Chart.Tooltip.prototype.drawBody = function(pt, vm, ctx) {
    var bodyFontSize = vm.bodyFontSize;
    var bodySpacing = vm.bodySpacing;
    var bodyAlign = vm._bodyAlign;
    var body = vm.body;
    var xLinePadding = 0;
    var textColor;

    ctx.textAlign = bodyAlign;
    ctx.textBaseline = 'top';
    ctx.font = Chart.helpers.fontString(bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);

    pt.x = getAlignedX(vm, bodyAlign);
    // Before Body
    var fillLineOfText = function(line) {
        let cols = line.split(':');
        if (bodyAlign == 'left' amp;amp; cols.length > 1) {
            line = cols.slice(0, cols.length-1).join(':')   '';
            let rightText = cols.slice(-1);
            ctx.textAlign = 'right';
            let x = getAlignedX(vm, 'right');
            ctx.fillText(rightText, x, pt.y);
            ctx.textAlign = 'left';
        }
        ctx.fillText(line, pt.x   xLinePadding, pt.y);
        pt.y  = bodyFontSize   bodySpacing;
    };

    // Draw body lines now
    Chart.helpers.each(body, function(bodyItem, i) {
        textColor = vm.labelTextColors[i];
        ctx.fillStyle = textColor;

        Chart.helpers.each(bodyItem.lines, function(line) {
            fillLineOfText(line);
        });
    });

    // After body lines
    Chart.helpers.each(vm.afterBody, fillLineOfText);
    pt.y -= bodySpacing; // Remove last body spacing */
}
 

Вот код для диаграммы js:

 var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'bar',
    responsive: true,

    // The data for our dataset
    data: {
        labels: {!! json_encode($labelsArray) !!},
        datasets: [
            {
                label: 'Time',
                fill: true,
                data: ["", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                backgroundColor: gradient,
                hoverBackgroundColor: gradient,
            }
        ]
    },

    border: 'none',
    borderColor: 'transparent',
    borderJoinStyle: 'none',

    // Configuration options go here
    options: {

        responsive: true,
        cutoutPercentage: 0,
        maintainAspectRatio: false,
        hover: {
            mode: 'nearest',
            intersect: true
        },
        tooltips: {
            position: "average",
            fullWidth: true,
            bodyFontSize: 9.5,
            displayColors: false,
            backgroundColor: '#2E323B',
            bodyFontFamily: 'SFUI-Medium',
            titleMarginBottom: 2,
            xAlign: 'center',
            yAlign: 'bottom',
            bodyFontStyle: 'bold',
            callbacks: {
                label: function (tooltipItem, data) {
                    if (tooltipItem.yLabel >= 460) {
                        chart.options.tooltips.yAlign = 'top'
                    } else {
                        chart.options.tooltips.yAlign = 'bottom'
                    }
                    var data = chartTooltipData[tooltipItem.xLabel];

                    if (data == undefined) {
                        return [
                            'Reaction : '   tooltipItem.yLabel   ' ms'
                        ];
                    }
                        $('.test-list ul li.active h3.heavy').text().trim() == 'VISUAL DIGITAL SPAN') {
                        return [
                            'Intensity : '   data.intensity,
                            'Accuracy : '   data.accuracy   ' %',
                            'Reaction : '   parseInt(data.reaction)   ' ms',
                          
                        ]
                    } else {
                        return [
                            'Intensity : '   data.intensity,
                            'Accuracy : '   data.accuracy   ' %',
                            
                        ]
                    }
                },
                title: function() {
                    return '';
                }
            }
        },
        layout: {
                    padding: {
                        top: 50,
                        bottom: 20,
                    }
                },
        
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                ticks: {
                    display: false,
                    fontSize: 16,
                },
                barPercentage: 1.5,
                scaleLineColor: 'transparent',
                categoryPercentage: 0.2,
                radius: 50,
                gridLines: {
                    display: false,
                    drawOnChartArea: false,
                    drawBorder: false
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    stepSize: 150,
                    fontFamily: 'SFUI-Medium',
                    fontColor: '#9ba1a7',
                    fontSize: 12,
                    scaleFontSize: 12,
                    fontStyle: 600,
                    max: 900,
                    callback: function (value, index, values) {
                        return ' '   value   ' ms'
                    }
                },
                gridLines: {
                    borderDash: [2, 3],
                    color: '#5d6268',
                    lineWidth: 0.3,
                    zeroLineColor: 'transparent'
                }
            }]
        }
    }
});