我正在使用flotcharts在页面上绘制条形图。我想要显示每个栏上方每个栏的值的工具提示,但它应该是永久性的 - 也就是说,它不应该在悬停或点击时处于活动状态。
我正在使用此代码段,它在悬停时效果很好:
var previousPoint = null,
previousLabel = null;
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'block',
top: y - 40,
left: x - 10,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
$("#placeholder2").on("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + y + " %</strong><br>");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});