我用 jQuery 制作了一张地图，它被分成许多区域，并使用地图坐标来制作悬停区域。悬停时，每个区域都会出现一个工具提示。一切都很好，但有一个问题。工具提示应跟随鼠标光标。这一点，我已经用 mousemove 完成了，但是如果我的地图位于页面中心的 div 中，则工具提示不在光标所在的位置，但可能更在左侧。屏幕越大，问题就越严重。
如何更改我的代码，使工具提示始终位于光标所在的位置？
$(function() {
$("#map-container AREA").mouseover(function() {
var regionMap = "." + $(this).attr("id") + "-map";
$(regionMap).css("display", "inline");
}).mouseout(function() {
var regionMap = "." + $(this).attr("id") + "-map";
// Check if a click event has occured and only change the Region hover state accodringly
if (!$(regionMap).hasClass("selected")) {
$(regionMap).css("display", "none");
}
});
$("#map-container AREA").click(function() {
$("#map-container img.region").removeClass("selected").css("display", "none");
var regionMap = "." + $(this).attr("id") + "-map";
$(regionMap).addClass("selected").css("display", "inline");
});
});
$(document).ready(function() {
$(".tooltip").hide();
$("#map-container area").mousemove(function(e) {
var regionList = '.' + $(this).attr('id') + '-list';
var topheight = $(regionList).height() + 55;
$(regionList).show();
$(regionList).css({
top: (e.pageY - topheight) + "px",
left: (e.pageX - 45) + "px"
});
});
$("#map-container area").mouseout(function(e) {
$(".tooltip").hide();
});
});