Javascript 带有悬停区域的地图，在div中显示alt文本-相对于悬停区域

我试图用悬停区域的alt文本显示一个div——相对于悬停区域定位

我可以让文本显示出来，但不是在正确的地方

这是我的js：

$(document).ready(function() {
if($('#Map')) {
    $('#Map area').each(function() {
    var altText = $(this).attr("alt");
        $(this).mouseover(function() {
    $("#popup").html(altText);
            $('#popup').show();

        });

        $(this).mouseout(function() {
    var altText = $(this).attr("alt");
            $('#popup').hide();
        });

    });
}
});

这很好用

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#popup").draggable();
    if ($('#Map')) {
        $('#Map area').each(function () {
            var altText = $(this).attr("alt");
            $(this).mouseover(function (event) {

                $("#popup").html(altText);
                $("#popup").css({ 'top': event.clientY, 'left': event.clientX });
                $('#popup').show();

            });

            $(this).mouseout(function () {
                var altText = $(this).attr("alt");
                $('#popup').hide();
            });

        });
    }
});

$（文档）.ready（函数（）{
$（“#弹出窗口”）.draggable（）；
如果（$（“#映射”））{
$（“#映射区域”）。每个（函数（）{
var altText=$（this.attr（“alt”）；
$（this）.mouseover（函数（事件）{
$（“#弹出窗口”）.html（altText）；
$（“#popup”）.css（{'top'：event.clientY，'left'：event.clientX}）；
$（'弹出窗口'）.show（）；
});
$（this）.mouseout（函数（）{
var altText=$（this.attr（“alt”）；
$（'弹出'）.hide（）；
});
});
}
});

---

你需要使div可拖动，然后只有它会动态地改变位置

你在使用传单吗？嗯，我不希望div可拖动，我已经尝试使用css将其相对于悬停区域进行定位，但似乎没有什么区别@用户2306046，我已经更新了答案，它会工作得很好。如果它有效，请接受它作为答案1.谢谢，那太好了。但是，看看当我在页面中添加其他内容时，它是如何将框进一步向下移动的？我如何适应这种情况？（我添加了h1）