Javascript 如何为鼠标悬停的每个城市在svg地图底部添加描述框？

我想把每个城市的描述放在地图的底部。每个城市的细节都可以在同一个地方看到，我必须为每个城市添加许多信息，这就是为什么我想把描述框放在地图底部的原因。我有什么办法可以完成这项任务吗。我尝试了很多方法，但都没有出现在页面底部

为了清晰起见，我减少了很多代码。我所做的只是删除了你的部分代码，你会发现。另外，请不要使用

width=“959px”height=“593px”viewBox=“none”

使用

viewBox=“0 0 959 593”

，在这种情况下，这将使SVG与“容器”（即

主体）一样大


$description=$（“.description”）；
$（'.enabled'）.hover（函数（）{
$（this.attr（“class”，“enabled heyo”）；
$description.addClass（'active'）；
$description.html（$（this.attr（'id'））；
}，函数（）{
$description.removeClass（'active'）；
});
/*
$（文档）.on（'mousemove'，函数（e）{
$description.css({
左：e.pageX，
顶部：e.pageY-70
});
});*/
html，正文{
宽度：100%；
}
svg{
/*最大宽度：100%！重要*/
宽度：100vh；
/*高度：自动*/
显示：块；
边框：1px实心；
}
.heyo:悬停{
填写：#CC2929；
-moz跃迁：0.3s；
-o-转变：0.3s；
-webkit转换：0.3s；
过渡：0.3s；
}
.启用{
填充：#21669E；
光标：指针；
}
.说明{
/*指针事件：无；
位置：绝对位置*/
字号：18px；
文本对齐：居中；
背景：白色；
填充：10px 15px；
z指数：5；
高度：30px；
线高：30px；
保证金：0自动；
颜色：#21669e；
边界半径：5px；
盒影：0 1px#eee；
/*-moz变换：translateX（-50%）；
-ms转换：translateX（-50%）；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）*/
显示：无；
}
.description.active{
显示：块；
}
.说明：之后{
内容：“；
位置：绝对位置；
左：50%；
最高：100%；
宽度：0；
身高：0；
左边距：-10px；
左边框：10px实心透明；
右边框：10px实心透明；
边框顶部：10px纯白；
}

与我的问题相关的示例问题您能输入一些代码以便我们可以帮助您吗？@javimovi这是与我的问题相关的示例代码，它没有出现在任何地方，因为它有一个显示：无