jquery - JVectorMap 信息框位置错误

Question

以下是在我的 Jvector 地图上设置信息框位置的代码。

$(".region-info-box").css({ 'top': mouseY, 'left': mouseX, "display": "block" });

以下是我得到的输出..

问题是当我在黑色圆形上单击时，信息框出现在鼠标单击下方，并且与实际鼠标单击略右。谁能建议我在哪里更改我的代码以在单击鼠标时出现信息框？？？

谢谢

Answer 1

我知道你有一个目前可以工作的东西，但我不确定它的扩展性如何，所以这里有另一个可能对你有用的解决方案。它将 div 的左下角放置在鼠标单击的位置。它考虑了信息框 div 的任何高度。

$("#info-box").show().css({ 
    position:"absolute",
    top: event.pageY - $("#info-box").height(),
    left: event.pageX
});

这是一个jsFiddle演示它。

Answer 2

$("#info-box").show().css({ position:"absolute", top: event.pageY - $("#info-box").height(), left: event.pageX }) ;