Javascript 有没有办法将工具提示添加到（响应的）html图像映射中？

我有一个自定义地图（图像），当鼠标光标悬停在国家区域上时，我需要显示国家名称

我使用的是HTML地图。使用HTML映射的我的图像处于一种模式中，您可以通过单击按钮打开它。我已经尝试过tooltipster（）和响应HTML图像映射jquery插件（），但我无法让它准确地显示我想要的工具提示，这可能是由于响应问题，因为图像的高度与模态相同，而图像的大小大于此值，并且我根据真实的图像大小创建了映射

这是我的地图代码：

 <img src="<?php the_field('home__map_lightbox_image'); ?>" class="locations-map-full" alt="<?php the_field('home__map_lightbox_title'); ?>" usemap="#map">
                    <map name="map" id="locations-map">
                           <area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="508, 361, 16" title="Tunisie" class="tooltip" />
<area shape="circle" coords="457, 374, 7" title="Algerie" class="tooltip" />
<area shape="circle" coords="406, 360, 16" alt="Maroc" class="tooltip" />
                    </map>

“class=”地点地图完整“alt=”“usemap=“#地图”>

---

所以，我的问题是：这是正确的方法吗？我是正确的方法还是应该使用HTML地图以外的其他东西？

你可以尝试使用这样的javascript插件：动态地重新计算

窗口上图像地图的坐标。加载
和
窗口。调整大小
。然后一切都会正常工作

如果您愿意，也可以尝试响应svg图像映射（它们更容易响应，但我不确定添加的工具提示）

比如，你看这个

以下是
您可以使用响应迅速且易于使用的Taggd脚本向地图添加自定义热点。
工作片段-香草JS

尽管不是完美的，但这种方法仍然有效：

注意：我已经更改了第一个显示在中间的图像贴图


函数myFunc（el）{
var tooltip=document.getElementById（'myTooltip'）；
tooltip.style.display='block'；
tooltip.innerHTML=el.title；
}
函数myFuncHide（el）{
var tooltip=document.getElementById（'myTooltip'）；
tooltip.style.display='none'；
tooltip.innerHTML=''；
}
document.addEventListener（'mousemove'，函数（e）{
/*console.log（e.pageX）；
控制台日志（e.pageY）*/
document.getElementById（'myTooltip'）.style.left=（e.pageX+5）+“px”；
document.getElementById（'myTooltip'）.style.top=（e.pageY+5）+“px”；
})；
#我的工具提示{
显示：内联块；
填充：15px；
背景：rgba（0,0,0,5）；
颜色：白色；
位置：绝对位置；
显示：无；
}

请在您的图像地图上添加一个在线链接，或者重新生成代码it@NikosM.完成..我无法共享链接，因为我正在使用localhost。是的，我认为您需要使用图像映射以外的其他内容，因为响应性质可能会改变给定的坐标。请尝试类似此jquery插件的内容。您提供的插件基于N图像映射，但我的问题是，是否使用不同的东西，如一些SVG地图等，我会尝试一下，虽然它似乎比我使用插件更好。如果它解决了你的问题，考虑接受答案。此外，你可以试试SVG地图，但我不知道将是多么容易添加工具提示，他们应该更好。问题是默认标题也显示在工具提示旁边，它看起来像重复的，没有响应。这并不能解决问题。您可以将标题保留为空，并使用另一个自定义属性，因为工具提示是基于鼠标位置而不是位置的。仅用于设置文本并显示工具提示div。虽然隐藏，但工具提示始终位于指针旁边。