我正在尝试显示流程图的工具提示。当他们将鼠标悬停在工具条上时,提示显示相应的值。我的图表占用了整个屏幕宽度,当它在最左边时,提示超出了屏幕,我看不到任何值。如果它在极左或极右,如何重新定位它。我正在传递项目。pageX和item。pageY值。我很困惑
#flot-tooltip {
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
position: absolute;
display: none;
border: 2px solid;
padding: 2px;
background-color: #FFF;
opacity: 0.8;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
function showTooltip(x, y, contents, z) {
$('<div id="flot-tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 30,
left: x - 110,
'border-color': z,
}).appendTo("body").show();
}
$("#flot-chart").bind("plothover", function(event, pos, item) {
if(item) {
if(previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$('#flot-tooltip').remove();
var x = item.datapoint[0].toFixed(2);
y = item.datapoint[1].toFixed(2);
z = item.series.color;
showTooltip(item.pageX, item.pageY, "<b>" + item.series.label + "</b><br /> <hr>" + y, z);
}
} else {
$('#flot-tooltip').remove();
previousPoint = null;
}
});
您可能需要在showTooltip
函数中添加一些逻辑。例如,当x
太靠近屏幕左边缘时,您想要限制它。你可以添加一些效果为:
function showTooltip(x, y, contents, z) {
if(x < 100){
x = 100;
}
//rest of function
}
这应该强制工具提示出现在x
等于100
的地方,而x
的值小于您的预定义值(这里以100
为例)。