jquery - 悬停时删除工具提示上的背景颜色淡出效果
问题描述
当我将鼠标悬停在工具提示上时,当我从工具提示中移动鼠标时,背景颜色会淡出。任何帮助将不胜感激。
我试图弄清楚是哪个代码产生了这种奇怪的效果。我已经尝试了几乎可能的解决方案。
谢谢 :)
这是我用来对齐标签右侧的代码:
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' && 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'
}
}]
}
}
});
解决方案
推荐阅读
- excel - 如果满足条件,将行数据从特定列复制到不同的工作表
- reactjs - 加速材质 UI 嵌套列表
- r - 如何在上面的行中减去一行?
- android - Gradle 构建错误:“未找到 ID 为 'com.google.ar.sceneform.plugin' 的插件。”
- javascript - Favicon 未显示在 Vue.js 变量路由中
- mysql - 根据 desc 列值将 id 分配给不同的组
- php - 通过 add_fee() 添加的 Woocommerce 费用在结帐后减少
- docker - Bitbucket 管道,我如何访问另一个容器?
- google-analytics - 使用 javascript 手动设置 gtag utm 参数
- java - EditText 完成后软键盘再次打开